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

Question

我有两个堆栈导航器，可以处理我的应用程序的两个不同部分，一个是身份验证，另一个是应用程序本身。我想把这两个堆栈导航器放在不同的文件中，并用一个文件来连接两者。有办法做到这一点吗？

主导航代码

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

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

1. 创建您的身份验证堆栈

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

2. 创建用户堆栈

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

3. 基于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 />;
}
}

4. 使用导航容器包装

<NavigationContainer>
<Account/>
</NavigationContainer>

Answer 2

您只需要在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>
)
}