如何解决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 中,您可以调度一个改变该条件的操作,这将动态更新您的导航器。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。