在 BottomTabNavigator react-navigation v5 内嵌套 StackNavigator

Question

通过我的第一个 React Native 项目，使用 react-navigation v5，并努力找出多个导航器背后的逻辑。

我试图从这里复制“auth-flow”设置，但我有一些额外的要求，一旦登录，它应该呈现一个bottomTab导航器，其中包含第二个屏幕列出的三个项目（创建、列表、帐户），呈现一个项目列表，单击一个会打开一个新屏幕以显示详细信息（我想这两个屏幕将是一个堆栈？）

pseudo routes:
- home
- lists 
    - details  <- nested in the tab navigator screen
- account

当前设置：

 export default function App() { return ( <SafeAreaProvider> <NavigationContainer> {isSignedIn? ( <Tab.Navigator> <Tab.Screen name='List' component={TrackListScreen} /> <Tab.Screen name='Create' component={TrackCreateScreen} /> <Tab.Screen name='Account' component={AccountScreen} /> </Tab.Navigator> ): ( <Stack.Navigator> <Stack.Screen name='Signup' component={SignupScreen} /> <Stack.Screen name='Signin' component={SigninScreen} /> </Stack.Navigator> )} </NavigationContainer> </SafeAreaProvider> ); }

Answer 1

在这种情况下，您将创建一个额外的保持组件，例如 TrackListHome。 TrackListHome 将是一个专门为 StackNavigator 的组件，initialRouteName 是您的 TrackListScreen，Details 将是 StackNavigator 中的另一个屏幕。 然后你就可以打电话

props.navigation.navigate("TrackListDetail")

您的 StackNavigator 可能看起来像这样 (TrackListHome)

return (
  <Stack.Navigator initialRouteName={'TrackListScreen'}>
    <Stack.Screen name='TrackListScreen' component={TrackListScreen} />
    <Stack.Screen name='TrackListDetail' component={TrackListDetail} />
  </Stack.Navigator>)

然后在 TabNavigation 内部，您将使用这个 TrackListHome 组件。

Answer 2

您需要做的是让List选项卡成为自己的堆栈导航器。 所以你会有这个

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        {isSignedIn ? (
          <Tab.Navigator initialRouteName='TrackListNavigator'>
            <Tab.Screen name='TrackListNavigator' component={TrackListNavigator} />
            <Tab.Screen name='Create' component={TrackCreateScreen} />
            <Tab.Screen name='Account' component={AccountScreen} /> 
          </Tab.Navigator>
         ) : (
          <Stack.Navigator>
            <Stack.Screen name='Signup' component={SignupScreen} />
            <Stack.Screen name='Signin' component={SigninScreen} />
          </Stack.Navigator>
        )}
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

因此，它不是导航到TrackListScreen的选项卡，而是导航到包含该屏幕的新堆栈导航器，如下所示

export default function TrackListNavigator() {
  return (
    <Stack.Navigator initialRouteName='TrackListScreen'>
      <Stack.Screen name='TrackListScreen' component={TrackListScreen} />
    </Stack.Navigator>
  )
}

这样，当您未登录时，您将只能访问Signup和Signin屏幕。 然后，一旦登录，您将登陆TrackListScreen并访问您添加到TrackListNavigator Stack.Screen