Stack Navigator 中的 React Native Tab Navigator答案

【问题标题】：React Native Tab Navigator within Stack NavigatorStack Navigator 中的 React Native Tab Navigator
【发布时间】：2020-08-25 20:23:56
【问题描述】：

我在 App.js 中有以下 Stack Navigator：

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 之间来回切换。如何做到这一点？

【问题讨论】：

标签： react-native react-navigation react-native-firebase

【解决方案1】：

这样做的方法是创建一个选项卡导航器组件，其中Home 和Profile 是导航器的两个屏幕：

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

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

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

【讨论】：