Question

使用react-navigation v5来完成我的第一个React Native项目，并努力将多个导航器合二为一。

我尝试从此处复制'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，可以访问您添加到Stack.Screen的任何其他TrackListNavigator。

在BottomTabNavigator react-navigation v5中嵌套StackNavigator

2 个答案: