1

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

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

所以我的问题如下，如果我有这种模式，我如何例如从TermsOfUseto导航Register而不返回 to 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 }
4

1 回答 1

2

我不能使用 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
       });
于 2019-05-05T11:01:15.337 回答