如何在 React Native 的主屏幕之前添加登录屏幕

Question

我的代码目前卡在主屏幕的顶部。但是，我想让您在登录屏幕上按登录按钮时转到主屏幕。我希望这里的登录屏幕没有顶部导航或底部标签导航。

Current Homescreen

下面是我的代码。登录是屏幕部件的导入。

请帮帮我

app.js

export default function App() {
  
  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === 'Home') {
                iconName = focused ? 'ios-home' : 'ios-home-outline';
              } else if (route.name === 'Purchase') {
                iconName = focused ? 'ios-list-circle' : 'ios-list';
              } else if (route.name === 'Wish List') {
                iconName = focused ? 'ios-star' : 'ios-star-outline'
              }

              // You can return any component that you like here!
              return <Ionicons name={iconName} size={size} color={color} />;
            },
          })}
          tabBarOptions={{
            activeTintColor: '#32cd32',
            inactiveTintColor: 'gray',
            
          }}
        >
          <Tab.Screen name="Home" component={HomeStackScreen} />
          <Tab.Screen name="Wish List" component={WishListStackScreen} />
          <Tab.Screen name="Purchase" component={PurchaseStackScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>

  );
};

Answer 1

我相信你应该首先在 app.js 中制作一个 stack navigator，其中登录屏幕和主页在堆栈中:

<NavigationContainer>
      <Stack.Navigator>
           <Stack.Screen name="Login" component={Login} />
           <Stack.Screen name="Home" component={Home} />
       </Stack.Navigator>
</NavigationContainer>

当您按下登录屏幕上的按钮时，您应该在用户通过身份验证后执行此操作：

<Button onPress={() => {navigation.navigate('Home')}}

然后在主页上你应该添加tabnavigator

如何在 React Native 的主屏幕之前添加登录屏幕

How to add a login screen before the Home screen in React Native

reactjs

react-native

authentication

navigation

stack-navigator