React-Native中的屏幕导航

wrrgggsh  于 2023-05-29  发布在  React
关注(0)|答案(2)|浏览(137)

我有下面的屏幕结构,我不知道如何做。我有一个底部标签屏幕,每个底部标签本身就是一堆屏幕。但在进入底部选项卡屏幕之前,我想授权用户。所以我有另一堆屏幕来处理身份验证。如何使之成为可能(即当用户启动应用时,如果该用户已经登录,则将向他们呈现底部标签页,但是如果他们尚未登录,则将向他们呈现注册/登录页)。我已经包括了以下内容以获得更多的上下文:认证页面

const authentication = createNativeStackNavigator();
const AuthorizationScreen = ({navigation}) => {
    const {bgcolr}  = React.useContext(ThemeContexts)
  return (
    <>
    <authentication.Navigator initialRouteName="Welcome" screenOptions={{tabBarVisible: true,headerStyle:{backgroundColor:bgcolr}}} >
        <Authorization.Screen name='Signup' component={Signup} />
        <Authorization.Screen name='Signin' component={Signin} />
    </authentication.Navigator>
    </>
  )
}

底部选项卡页面

const MyTabs = ({navigation})=>{
    const Tab = createBottomTabNavigator();
    return (
        
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeStackScreen} />
            <Tab.Screen name="Profile" component={ProfileStackScreen}/> 
        </Tab.Navigator>
    )
}

在底部选项卡的主页选项卡中,存在以下屏幕堆栈

const ProfileStack = createNativeStackNavigator();
const ProfileStackScreen = () => {
  return (
    <>
    <ProfileStack.Navigator initialRouteName = "Profiles">
        <ProfileStack.Screen name ="Profiles" component={Profile}/>
        <ProfileStack.Screen name="settings" component={Settings}/>
        <ProfileStack.Screen name="Logout" component={Logout} />
    </ProfileStack.Navigator>
    </>
  )
}

因此,如果用户还没有登录,我希望向其显示授权屏幕。但如果他们第一次打开应用程序时已经登录,则向他们显示MyTabs底部选项卡。我该怎么做。此外,一旦用户登录,如果注销,他们将再次显示授权屏幕。我知道我需要使用Asyncstorage来保存授权属性。但我不知道该怎么做

fdbelqdn

fdbelqdn1#

日安。我强烈建议您查看react native navigation的官方网站。它有很好的文档记录,并解释了如何根据用户登录的内容显示屏幕:它将显示特定的屏幕,如果没有,它将显示身份验证屏幕。我在工作中跟随他们,使用redux工具包作为全局状态管理,这个架构绝对令人惊叹。祝你好运。https://reactnavigation.org/docs/auth-flow/

zzwlnbp8

zzwlnbp82#

要使用堆栈导航,您可以像这样使用

<NavigationContainer ref={navigationRef}>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName={YourInitialScreenName}>
            <Stack.Screen name={YourInitialScreenName} component={YourInitialScreen}/>
            <Stack.Screen name={Routes.Dashboard} component={CustomTabComponent} />
      </Stack.Navigator>
</NavigationContainer>

对于标签导航,你必须这样做代码:

<Tab.Navigator
            screenOptions={{
              headerShown: false,
            }}
            initialRouteName={Routes.Home}
            tabBar={props => <CustomTabBar {...props} />}>
      <Tab.Screen name={Routes.Home} component={Home}/>
</Tab.Navigator>

有关堆栈导航的更多详细信息,您可以查看此链接:-https://reactnavigation.org/docs/stack-navigator
有关选项卡导航的详细信息,请查看以下链接https://reactnavigation.org/docs/bottom-tab-navigator

相关问题