Javascript 嵌套底部选项卡导航器内的StackNavigator react navigation v5

通过我的第一个React原生项目，使用React navigation v5，努力在一个导航器中计算出多个导航器背后的逻辑

我试图从这里复制设置，但我有一些额外的要求，一旦登录，它应该呈现一个底部选项卡导航器，其中包含三个项目（创建、列表、帐户），其中第二个屏幕列出、呈现一个项目列表，单击其中一个打开一个新的细节屏幕（我认为这两个屏幕将是一个堆栈？）

伪路由：
-家
-列表
-详细信息在此场景中，您将创建一个额外的等待组件，例如TrackListHome。TrackListHome将是一个特定于StackNavigator的组件，initialRouteName是您的TrackListScreen，详细信息将是StackNavigator中的另一个屏幕。那你就可以打电话了

props.navigation.navigate("TrackListDetail")

您的StackNavigator可能如下所示（TrackListHome）

返回(
)

然后在TabNavigation中使用这个TrackListHome组件。
您要做的是使
列表
选项卡成为自己的堆栈导航器。那么你要这个

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>
  );
}

这样，当您未登录时，您将只能访问
Signup
和
Signin
屏幕。然后，一旦登录，您将登录到
TrackListScreen
，并可以访问任何其他
堆栈。Screen
您添加到
TrackListNavigator
中，我有一个类似的设置-尽管是相反的，并且将路由作为StackNavigator（TrackListNavigator）进行身份验证，并且主路由将呈现TabNavigator。这是更好的工作。非常感谢。嘿，艾尔，有了这个设置，我如何从帐户屏幕导航回登录路径？因为会有一个注销按钮清除令牌，应该重新定向回。@joshuaaron我使用了上下文，并通过上下文提供了一个有状态变量及其setter。因此，当用户注销时，我使用上下文设置器
setIsSignedIn（false）
。变量将被更新，用户将返回到注册屏幕
return (
  <Stack.Navigator initialRouteName={'TrackListScreen'}>
    <Stack.Screen name='TrackListScreen' component={TrackListScreen} />
    <Stack.Screen name='TrackListDetail' component={TrackListDetail} />
  </Stack.Navigator>)

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>
  );
}

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