React Navigation SwitchNavigator - перемещаться между несколькими стеками

Question

Мне недавно пришлось провести рефакторинг навигации в моем приложении React Native с помощью React Navigation.

Действительно, у меня в приложении несколько навигаторов для разных целей: экраны, когда они не подключены, экраны, когда они подключены, и некоторые экраны, которыедолжен быть доступен в обеих ситуациях (например, условия использования).

Поэтому мой вопрос заключается в следующем: если у меня есть этот шаблон, как я могу, например, перейти от 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

Я не могу использовать navigate.goBack () или navigation.navigate ('Register') с тех пор эти экраны не в том же 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
       });