在 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