在Stack Navigator中反应Native Tab Navigator

如何解决在Stack Navigator中反应Native Tab Navigator

我在App.js中具有以下堆栈导航器：

return (
    <NavigationContainer>
      <Stack.Navigator  initialRouteName="Login" screenOptions={{headerShown:false}}>
        {user ? (
          <>
            <Stack.Screen name="Home">
              {(props) => <HomeScreen {...props} extraData={user} />}
            </Stack.Screen>
            <Stack.Screen name="Profile" component={ProfileScreen} />
            <Stack.Screen name="Login" component={LoginScreen} />
            
          </>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );

我想添加一个显示在HomeScreen上的底部标签导航器，并允许我在HomeScreen和ProfileScreen之间来回切换。该怎么办？

解决方法

方法是创建一个标签导航器组件，其中Home和Profile是导航器的2个屏幕：

const Tab = createBottomTabNavigator();

function TabNavigator({route}) {
  // Retrieve user from initalParams.
  // The user is passed to initialParams in the snippet below.
  const user = route.params?.user
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

然后，选项卡导航器可以是您的堆栈导航器的屏幕：

return (
  <NavigationContainer>
    <Stack.Navigator
      initialRouteName="Login"
      screenOptions={{headerShown: false}}>
      {user ? (
        <>
          <Stack.Screen name="Tabs" component={TabNavigator} initialParams={{user: user}}/>
        </>
      ) : (
        <>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Registration" component={RegistrationScreen} />
        </>
      )}
    </Stack.Navigator>
  </NavigationContainer>
);

如果您需要从user内部访问HomeScreen，则可以使用initialParams向下传递它，就像传递给TabNavigator一样。如果您不想像这样继续传递东西，可以尝试使用Context API。

---

在上例中，我删除了Login屏幕，因为我认为这是一个错误，因为您已经为没有身份验证的用户定义了Login屏幕。