Question

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

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

因此，我的问题是以下内容，如果我有此模式，例如，如何从TermsOfUse导航到Register而又不返回Welcome？

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

// 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

我不能使用navigation.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
       });

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

1 个答案: