0

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

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

BottomNavigation.js
StackNavigation.js
AuthStackNavigation.js

我在其中创建了多个堆栈导航器并在StackNavigation.js其中渲染了每个 StackNavigatorBottomNavigation.js

***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 。提前致谢！

4

2 回答 2

1

如果两个单独的导航器彼此不相关（一个是另一个导航器的子导航器等），则无法在它们之间进行通信，除非您创建类似 RootStackNavigator 的东西，它位于更高级别并且包含所有您在上面列出的导航器。创建访客导航器数组、授权导航器数组和一些共享路由（如果需要）。Guest navigator 仅包含 authstack，授权一个包含其他 navigator，如果您使用 redux、context 或类似的东西，您可以在启动时检查令牌以确定您必须使用哪个 navigator。

很难解释；）希望这会有所帮助..

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 中，您可以调度一个可以更改该条件的操作，这将动态更新您的导航器。

于 2021-02-27T11:02:49.147 回答
1 
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>
    );
}

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

于 2021-02-27T06:28:57.457 回答