重置主屏幕的导航堆栈（React Navigation 和 React Native）

IT技术 javascript react-native navigation react-navigation
2021-02-27 01:52:31

我在React Navigation和 React Native的导航上遇到了问题。这是关于重置导航并返回主屏幕。

我在 DrawerNavigator 内部构建了一个 StackNavigator，并且主屏幕和其他屏幕之间的导航正在工作。但问题是，导航堆栈不断增长。我不确定如何从堆栈中删除屏幕。

例如，当从主屏幕到设置屏幕，然后到入口屏幕，最后再到主屏幕时，主屏幕在堆栈中出现两次。使用后退按钮，我不会退出应用程序，而是再次进入输入屏幕。

再次选择主页按钮时，重置堆栈会很棒，但我不知道该怎么做。这里有人试图帮助遇到类似问题的其他人，但该解决方案对我不起作用。

const Stack = StackNavigator({
  Home: {
    screen: Home
  },
  Entry: {
    screen: Entry
  },
  Settings: {
    screen: Settings
  }
})

export const Drawer = DrawerNavigator({
  Home: {
    screen: Stack
  }},
  {
    contentComponent: HamburgerMenu
  }
)

这是抽屉屏幕的一个简单示例

export default class HamburgerMenu extends Component {
  render () {
    return <ScrollView>
      <Icon.Button
        name={'home'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Home')}}>
        <Text>{I18n.t('home')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'settings'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Settings')}}>
        <Text>{I18n.t('settings')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'entry'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Entry')}}>
        <Text>{I18n.t('entry')}</Text>
      </Icon.Button>
    </ScrollView>
  }
}

我希望你能帮助我。这是导航的重要组成部分，一个解决方案会很棒！

6个回答

这是我的做法： 

reset(){
    return this.props
               .navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [
                      NavigationActions.navigate({ routeName: 'Menu'})
                    ]
                  }));
  }

至少将“菜单”替换为“主页”。您可能还希望根据您的实现调整 this.props.navigation。

在版本 > 2 中，请遵循以下步骤：

import { NavigationActions, StackActions } from 'react-navigation';
        const resetAction = StackActions.reset({
                index: 0,
                actions: [NavigationActions.navigate({ routeName: 'MainActivity' })],
            });

this.props.navigation.dispatch(resetAction);
工作得很好，但你有没有内存泄漏？我知道在 Xamarin 上这样做不会释放堆栈并且在孩子和父母之间导航会产生泄漏。这里也一样吗？
2021-04-20 01:52:31
在这种情况下如何发送导航参数？
2021-04-27 01:52:31
为了避免讨厌的动画，我不得不根据这个答案完全禁用所有过渡的动画。
2021-04-27 01:52:31
我正在使用 react navigation v2 apis，reset api 被移到 StackActions ( v2.reactnavigation.org/docs/en/stack-actions.html )，但它对我不起作用，我正在尝试与链接中给出的相同的方法
2021-04-30 01:52:31
产生大多数 QA 会拒绝 fyi 的讨厌的动画。
2021-05-11 01:52:31

react导航 5.x

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

有零食

这可以完成 5.x 的工作
2021-04-21 01:52:31
当我按下后退按钮时，它仍然无法工作
2021-04-26 01:52:31
适用于 React Navigation 5.10
2021-04-26 01:52:31
这个答案应该是最重要的，我浪费了大约 30 分钟寻找这个：祈祷
2021-05-06 01:52:31
这对我有用，坦克！！！为什么只使用 CommonActions.reset 时不起作用？
2021-05-12 01:52:31

我在使用@react-navigation Bashirpour's Answer时发现了这种方法。然而，在尝试已经有导航的功能组件时，props这是一种编写重置堆栈操作的巧妙方法：

props.navigation.reset({
     index: 0,
     routes: [{ name: 'Dashboard' }]
})
拯救我的一天尝试了许多不同的解决方案，但对于功能组件来说是最佳解决方案。
2021-04-20 01:52:31
似乎适用于 Tab 导航，但是，这在屏幕之间切换时确实会产生明显的延迟。
2021-04-21 01:52:31
我清除了堆栈中路由的 componentWillUnmount 上的 timeInterval，但这似乎不起作用。组件永远不会进入“卸载”状态？
2021-04-23 01:52:31
它应该navigation.reset代替props.navigation.reset功能组件。
2021-04-25 01:52:31
我想这是最好的方法。
2021-05-11 01:52:31

这是我如何做到的：

import { NavigationActions } from 'react-navigation'

this.props.navigation.dispatch(NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: 'ParentStackScreen' })]
}))

重要的部分是key: null。

这会在从子导航器导航到父导航器时擦除堆栈。

如果出现此错误，请执行以下操作：

在此处输入图片说明

对于动画，我使用

// https://github.com/oblador/react-native-animatable
import * as Animatable from 'react-native-animatable'

我只是自己控制所有的动画。把它们放在任何你想用它包装组件<Animatable.View>。

上面显示的代码正在调度重置堆栈的操作，因此它会转到您想要触发的位置。例如，您可以导入NavigationActions您的动作创建者文件并在某些动作通过时重置堆栈。
2021-04-21 01:52:31
谢谢！这key: null就是我所缺少的:)
2021-04-28 01:52:31

对于最新版本的 react-navigation，您应该使用 StackActions 来重置堆栈，这是一段代码：

// import the following
import { NavigationActions, StackActions } from 'react-navigation'

// at some point in your code
resetStack = () => {
 this.props
   .navigation
   .dispatch(StackActions.reset({
     index: 0,
     actions: [
       NavigationActions.navigate({
         routeName: 'Home',
         params: { someParams: 'parameters goes here...' },
       }),
     ],
   }))
}
如果他想进入Settings屏幕怎么办？
2021-05-09 01:52:31
@AvinashRaj 我不确定我是否安静地理解了您的问题，但如果我理解了，只需将 routeName: 'Home' for routeName: 'Settings' 放在我发布的代码片段上。希望能帮助到你
2021-05-13 01:52:31
我通过添加另一个操作项使其工作。你知道如何设置抽屉项目焦点吗？因为这样导航后，焦点还是在默认的抽屉项上
2021-05-13 01:52:31
其它你可能感兴趣的问题
上一篇检测用户是否正在滚动 下一篇检查输入是数字还是字母javascript