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

7 回答

• 0

  这是我怎么做的：

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

  至少用'Home'替换'Menu' . 您可能还希望将this.props.navigation改编为您的实现 .

  回复于 2024-04-20T16:58:15+08:00
• 4

  在您的StackNavigator和DrawerNavigator中，您使用Home作为键，我认为它必须是唯一的，这就是它创建问题的原因 . 你可以尝试用DrawerNavigator中的Stack替换Home .

  希望这会有所帮助:)

  回复于 2024-04-20T16:58:15+08:00
• 3

  弹出操作会将您带回到堆栈中的上一个屏幕 . n参数允许您指定要弹出的屏幕数量 .

  n - number - 要弹回的屏幕数 .

  从'react-navigation'导入;

  const popAction = StackActions.pop（{n：1，}）;

  this.props.navigation.dispatch（popAction）;

  回复于 2024-04-20T16:58:15+08:00
• 15

  我是这样做的：

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

  重要的部分是关键：null .

  这会在导航 from a child navigator to a parent navigator时擦除堆栈 .

  如果您收到此错误，请执行此操作：

  对于动画，我使用

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

  我只是自己控制所有的动画 . 通过 <Animatable.View> 包装它们，将它们放在您想要的任何组件上 .

  回复于 2024-04-20T16:58:15+08:00
• 37

  答案是 createSwitchNavigator ，那些没有叠加你的导航 . 在带有主屏幕/堆栈的createSwitchNavigator中添加您的身份验证屏幕/导航器 .

  这样，当您从家中导航到登录时，不会保留堆栈 .

  有关更多信息https://reactnavigation.org/docs/en/auth-flow.htmlLoginStack

  回复于 2024-04-20T16:58:15+08:00
• 1

  对于最新版本的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...' },
         }),
       ],
     }))
  }
  

  回复于 2024-04-20T16:58:15+08:00
• 0

  要使用Back，您需要找到与路径关联的唯一键 . 在导航减速器中，您可以搜索现有状态以使用该路径查找堆栈中的第一个路径，获取其密钥并将其传递给Back . 然后返回将导航到您给出的路径之前的屏幕 .

  let key;
  
    if (action.payload) {
      // find first key associated with the route
      const route = action.payload;
  
      const routeObj = state.routes.find( (r) => r.routeName === route );
  
      if (routeObj) {
        key = { key: routeObj.key };
      }
    }
  
    return AppNavigator.router.getStateForAction( NavigationActions.back( key ), state );
  

  回复于 2024-04-20T16:58:15+08:00