javascript - React Navigation SwitchNavigator - 在多个堆栈之间导航

Question

我最近不得不使用 React Navigation 重构我的 React Native App 中的导航。

事实上，我的应用程序中有几个导航器用于不同的目的:未连接时的屏幕、连接时的屏幕以及在两种情况下都应该可用的一些屏幕(例如使用条款)。

所以我的问题如下，如果我有这种模式，我如何才能从 TermsOfUse 导航到 Register 而无需返回 Welcome?

我不能使用 navigate.goBack() 或 navigation.navigate('Register') 因为这些屏幕不在同一个 StackNavigator，并在两个导航器中复制 TermsOfUse 会很脏。

// Screens
const NotConnectedScreens = {
  Welcome: { screen: WelcomeScreen },
  Register: { screen: RegisterScreen },
}

const ConnectedScreens = {
  Homepage: { screen: HomepageScreen },
  Tutorial: { screen: TutorialScreen },
}

const OthersScreens = {
  TermsOfUse: { screen: TermsOfUseScreen },
}

// Stacks
const NotConnectedStack = createStackNavigator(NotConnectedScreens, {
  initialRouteName: 'Welcome',
})

const ConnectedScreens = createStackNavigator(ConnectedScreens, {
  initialRouteName: 'Homepage',
})

const OtherStack = createStackNavigator(OtherScreens, {
  initialRouteName: 'TermsOfUse',
})

// App navigation
const AppContainer = createAppContainer(
  createSwitchNavigator(
    {
      NotConnectedStack: NotConnectedStack,
      ConnectedStack: ConnectedStack,
      OthersStack: OthersStack,
    },
    {
      initialRouteName: 'LandingStack',
      defaultNavigationOptions: {
        header: null,
        headerMode: 'none',
      },
    }
  )
)

export { AppContainer as default }

Answer 1

I can't use navigate.goBack() or navigation.navigate('Register') since those screens are not in the same StackNavigator.

不完全正确，如果你的屏幕有一个唯一的名字，无论你需要导航到那个页面，你都可以调用函数 this.props.navigation.navigate('SecondPage') .

但有时无法从另一个堆栈转到屏幕，因为它需要在导航到时传递一些数据。在这种情况下，请确保您的屏幕具有不同的名称

DevicesList: {screen: DevicesList },// this is wrong
DevicesListPage: {screen: DevicesList },// this is right

然后您可以从另一个堆栈导航到该页面，如下所示:

this.props.navigation.navigate('DevicesListPage', { 
        //your data
       });