React Navigation 5：在 React Native 中在不同的堆栈导航器之间切换

问题描述

我发现难以消化官方文档，并且一直在寻找在不同堆栈导航器之间移动的解决方案。我提供了我当前的实现和代码片段来更好地解释我的问题。

我有一个底部选项卡导航器和 2 个堆栈导航器来处理不同的用例。

BottomNavigation.js
StackNavigation.js
AuthStackNavigation.js

我在 StackNavigation.js 内创建了多个堆栈导航器，并在 BottomNavigation.js 内呈现每个 StackNavigator

***StackNavigation.js***

const Stack = createStackNavigator();

const HomeStackNavigator = () => {
    return (
        <Stack.Navigator initialRouteName="Home" screenoptions={Screenlogo}>
            <Stack.Screen name="HomeScreen" component={Home} />
        </Stack.Navigator>
    );
}

const ProfilestackNavigator = () => {
    return (
        <Stack.Navigator initialRouteName="Home" screenoptions={Screenlogo}>
            <Stack.Screen name="MahaExpo" component={Profile} />
        </Stack.Navigator>
    );
}

export { HomeStackNavigator,ProfilestackNavigator };

正如我所说，我正在标签导航器中渲染每个导航器以在屏幕之间切换。

 ***BottomNavigation.js***

import { HomeStackNavigator,ProfilestackNavigator } from '../Navigations/StackNavigation'

const Tab = createMaterialBottomTabNavigator();

function BottomNavigation() {
    return (
        <Tab.Navigator
            initialRouteName="Home" >
            <Tab.Screen
                name="Home"
                component={HomeStackNavigator}
            />
            <Tab.Screen
                name="ProfilestackNavigator"
                component={ProfilestackNavigator}
            />
        </Tab.Navigator>
    )
}

export default BottomNavigation

我在 app.js 和 NavigationContainer 中渲染它。我创建了 AuthStackNavigation.js，它有一个登录和注册屏幕。

***AuthStackNavigation.js***

const AuthStack = createStackNavigator();

const AuthStackNavigation = ({ }) => (

    <AuthStack.Navigator headerMode='none'>
        <AuthStack.Screen name="UserLogin" component={UserLogin}></AuthStack.Screen>
        <AuthStack.Screen name="UserRegister" component={UserRegister}></AuthStack.Screen>
    </AuthStack.Navigator>
);

export default AuthStackNavigation

所以目前，我正在显示带有一些公共内容的主屏幕，用户可以使用链接到不同屏幕的底部标签导航器切换到不同的屏幕。当用户单击个人资料选项卡时，我会显示一个登录按钮，该按钮应将用户带到具有登录和注册屏幕的 AuthStackNavigation.js。提前致谢！

解决方法

const ProfileStackNavigator = () => {
    return (
        <Stack.Navigator initialRouteName="Home" screenOptions={ScreenLogo}>
            <Stack.Screen name="MahaExpo" component={Profile} />
            <Stack.Screen name="UserLogin" component={UserLogin} />
            <Stack.Screen name="UserRegister" component={UserRegister} />
        </Stack.Navigator>
    );
}

在个人资料页面检查用户是否登录，如果没有，只需导航到用户登录屏幕。登录后只需弹回个人资料页面即可刷新。

,

如果两个单独的导航器彼此不相关（一个是另一个导航器的子导航器等），则无法在两个单独的导航器之间进行通信，除非您创建类似 RootStackNavigator 之类的东西，它位于更高级别，并且将包含您在上面列出的所有导航器。 创建访客导航器阵列、授权导航器阵列和一些共享路线（如果需要）。来宾导航器仅包含 authstack，授权的导航器包含其他导航器，如果您使用 redux、上下文或类似的东西，您可以在启动时检查令牌以确定您必须使用哪个导航器。登录将为您提供令牌，并将自动将您的导航器更改为授权导航器，而注销会将您退回（因为您不再拥有令牌）到仅包含身份验证流程的访客导航器。

很难解释;) 希望这会有所帮助..

Redux 示例

`
const authNavigators = [
{
type: "screen",key: "authNavigators",name: "authNavigators",component: authNavigators,},];

const otherNavigators = [
{
type: "screen",key: "otherNavigators1",name: "otherNavigator1",component: otherNavigators1,{
type: "screen",key: "otherNavigators2",name: "otherNavigator2",component: otherNavigators3,...
];

const RootStack = () => {

  const { condition } = useSelector(
  (state) => state.store);

 let navigators = otherNavigators;

 if(condition) {
  navigators = authNavigators;
  }

 return (
 <RootStackNavigator.Navigator>
  {navigators.map((item) => {
    return (
      <RootStackNavigator.Screen
        {...item}
        options={({ route: { params } }) => ({
          ...item.options,})}
      />
    );
  })}
</RootStackNavigator.Navigator>
 );
};

export default RootStack;`

在 redux 中，您可以调度一个改变该条件的操作，这将动态更新您的导航器。