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

Question

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

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 Error: There is no route defined for key DashboardScreen. Must be one of: 'StackNavigator','ModalNavigator'

Answer 1

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

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());