如何在 React Native 中加入 2 个堆栈导航器

Question

我有 2 个堆栈导航器来处理我的应用程序的 2 个不同部分，一个是身份验证，另一个是应用程序本身。我想将这两个堆栈导航器放在不同的文件中，并在一个文件中加入这两个文件。有办法吗？

MainNavigation 代码

import React from 'react'
import {NavigationContainer} from '@react-navigation/native'

import AuthNav from './AuthNav'
import AppNav from './AppNav'

const MainNav = () => {
    return (
        <NavigationContainer>
            <AuthNav />
            <AppNav />
        </NavigationContainer>
    )
}

export default MainNav

AppNavigation 代码

const Stack = createStackNavigator<AppNavParams>()
const AppNav = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Register">
                {props => <RegisterScreen {...props} />}
            </Stack.Screen>
        </Stack.Navigator>
    )
}

AuthNavigation 代码

const Stack = createStackNavigator<AppNavParams>()
const AuthNav = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Login">
                {props => <RegisterScreen {...props} />}
            </Stack.Screen>
        </Stack.Navigator>
    )
}

edit1：删除图像并插入代码

Answer 1

您只需要在 MainNav 中验证您的身份验证令牌是否存在并围绕 AppNav 和 AuthNav

创建一个堆栈导航器

你可以这样做

import React, { useState, useEffect, useRef } from 'react'
import { NavigationContainer, useLinking } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import AppNav from './AppNav'
import AuthNav from './AuthNav'

const AppStack = createStackNavigator()

const MainNav() => {

  const someFn = () => {
    // write your logic here. Either retrieve from redux store or from local storage
    // return true or false
  }

  const isLoggedIn = someFn()


  return (
    <NavigationContainer>
      <AppStack.Navigator>
        {isLoggedIn ? (
          <AppStack.Screen name='App' component={AppNav} />
        ) : (
          <AppStack.Screen name='Auth' component={AuthNav} />
        )}
      </AppStack.Navigator>
    </NavigationContainer>
  )
}

Answer 2

您需要创建一个 auth 堆栈和 user 堆栈并根据 sign 状态进行渲染。

创建您的身份验证堆栈。

const Stack = createStackNavigator();

export default function AuthStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
    </Stack.Navigator>
  );
}

创建您的用户堆栈。

const Stack = createStackNavigator();

export default function UserStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="User" component={UserScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

根据sign状态渲染auth或user。

export default function Account({ navigation, route }) {
  const [sign, setSign] = useState(false);

  useEffect(() => {
    // some logic to check user sign
  }, []);

  if (sign) {
    return <UserStack />;
  } else {
    return <AuthStack />;
  }
}

用导航容器包装

<NavigationContainer>
  <Account/>
</NavigationContainer>

如何在 React Native 中加入 2 个堆栈导航器

How to join 2 stack navigators in React Native

react-native

stack-navigator