具有信息路由的多栈导航器

Question

因此，我创建了具有多个堆栈导航器的RN项目。

• 登录路由
• 非登录路由

所以我没有登录像这样的线路

import React from "react"
import { createNativeStackNavigator } from "react-native-screens/native-stack"
import { Introduction, Login } from "@src/screens/loggedOut"

const Stack = createNativeStackNavigator()

const defaultOptions = {
  headerShown: false
}
const LoggedOutRoutes = () => {
  return (
    <Stack.Navigator initialRouteName="introduction">
      <Stack.Screen name="introduction" component={Introduction} options={defaultOptions} />
      <Stack.Screen name="login" component={Login} options={defaultOptions} />
    </Stack.Navigator>
  )
}

export default LoggedOutRoutes

并以同样的方式登录

import React from "react"
import { createNativeStackNavigator } from "react-native-screens/native-stack"
import {Home,Settings } from "@src/screens/loggedIn"

const Stack = createNativeStackNavigator()

const defaultOptions = {
  headerShown: false
}
const LoggedIn = () => {
  return (
    <Stack.Navigator initialRouteName="home">
      <Stack.Screen name="home" component={Home} options={defaultOptions} />
      <Stack.Screen name="settings" component={Settings} options={defaultOptions} />
    </Stack.Navigator>
  )
}

export default LoggedIn

现在，我希望根据用户登录与否加载这些根中的任何一个。

我该怎么做？

Answer 1

假设您保存了登录状态，您可以将导航从“@react导航/本机”包装到NavigationContainer组件中，并有条件地呈现正确的导航。就像这样：

<NavigationContainer>

  {userLoggedIn ? <LoggedIn /> : <LoggedOutRoutes />}

</NavigationContainer>