时间戳

首页 > 解决方案 > 如何使用 react-navigation 重置到不同的堆栈

react-native - 如何使用 react-navigation 重置到不同的堆栈

问题描述

我们在我们的 react native 应用程序中使用react-navigation作为默认导航系统，该应用程序当前有多个堆栈。我们想从一个堆栈中的屏幕导航到另一个堆栈中的屏幕。这是不同堆栈的基本示例：

const StackNavigator = createStackNavigator({
  SplashScreen: connectToStore(SplashScreen),
},{
  initialRouteName: 'SplashScreen',
  mode: 'card'
})

const ModalNavigator = createStackNavigator({
  LoginScreen: connectToStore(LoginScreen),
})

const AppNavigator = createStackNavigator({
  StackNavigator: StackNavigator,
  ModalNavigator: ModalNavigator,
}, {
  initialRouteName: 'StackNavigator',
  headerMode: 'none',
  mode: 'modal'
})

问题是如果我们尝试像这样重置到新屏幕：

const resetAction = StackActions.reset({
  index: 0,
  key: null,
  actions: [
    NavigationActions.navigate({
      routeName: 'LoginScreen',
    })
  ]
});
this.props.navigation.dispatch(resetAction);

我们得到一个类似这样的错误：

ExceptionsManager.js:74 错误：没有为关键 DashboardScreen 定义路由。必须是以下之一：'StackNavigator'、'ModalNavigator'

标签： react-nativereact-navigation

解决方案

由于这个问题似乎没有很好的记录或在这里的其他地方得到回答

const resetAction = StackActions.reset({
  index: 0,
  key: null,
  actions: [
    NavigationActions.navigate({
      routeName: 'ModalNavigator',
      action: NavigationActions.navigate({
        routeName:'LoginScreen', 
        params:{}
      })
    })
  ]
});
this.props.navigation.dispatch(resetAction);

resetTo首先，我们需要指定在这种情况下我们想要的正确堆栈ModalNavigator，然后我们添加一个子操作，我们可以在其中指定该导航器的屏幕，即LoginScreen。

仅供将来参考，弹出或返回我们可以使用

this.props.navigation.dispatch(StackActions.pop({ n:1 }));

其中 n 是要弹出的屏幕数量，或者只是一直播放的屏幕数量：

this.props.navigation.dispatch(StackActions.popToTop());

推荐阅读