React Native-Tab Navigator问题

Question

我正在将React导航与react native一起使用，...单击选项卡导航器中的选定选项卡会重置特定选项卡内的堆栈。请帮助我摆脱这种行为。 如果用户确认要返回，我只想返回。

Answer 1

您应将Tab导航器嵌套在堆栈导航中。

示例：

const StackNavigator = createStackNavigator(
    {
        TabNavigator: {
            screen: TabNavigator
    }
)

还有另一种解决方案可以彻底解决此问题，但是它会使您的应用程序过于复杂，因此，如果您不必使用它，我不建议这样做。您可以为每种导航（案例中的堆栈和标签）发送导航道具。

示例：

const StackNavigator = createStackNavigator(   {
    Screen1: { screen: ({ navigation }) =>
      <StackComponent
        screenProps={{
          stackNavigator: navigation
        }}
      />
    }
})

const TabNavigator = createTabNavigator(   {
    Screen2: { screen: ({ navigation, screenProps }) =>
      <TabComponent
        screenProps={{
          tabNavigator: navigation,
          stackNavigator: screenProps.stackNavigator
        }}
      />
    }
})

执行此操作时，可以专门选择要使用的导航。例如：this.props.screenProps.stackNavigation.navigation.goBack()。