时间戳

首页 > 解决方案 > React Native 中的身份验证流程

react-native - React Native 中的身份验证流程

问题描述

我在创建我的应用程序的身份验证流程时遇到问题。我真正想要的是根据用户的角色有条件地导航用户。

默认情况下，我创建了一个 AuthStack，它基本上是一个 stackNavigator，它有一个登录页面。一旦用户登录，我们就会通过网络请求接收用户的角色。接下来，我将他导航到一个简单的主页，该主页只返回基于他的角色的 switchNavigator。这是为了更清晰的代码。

const AuthStack = createStackNavigator({
    Login: {
        screen: Login
    },
    SignUp: {
        screen: SignUp
    },
    Home: {
        screen: Home
    }
},
    {
        initialRouteName: 'Login',
        headerMode: 'none'
    });

const AppContainer = createAppContainer(AuthStack);
const Navigation = () => {
    return <AppContainer />
}

当用户登录时，我将他重定向到上述堆栈中显示的主屏幕。这是主屏幕中的代码：

const Home = (props) => {
    const AppContainer = createAppContainer(RootNavigator(props.user.role))
    return <AppContainer />
}

在这里，我创建了一个新的应用程序容器（这可能是不好的做法，请提供建议）。RootNavigator 是一个辅助函数，它返回一个 switchNavigator：

export const RootNavigator = (user) => {
return createSwitchNavigator({
    Admin: {
        screen: AdminDrawerNavigator
    },
    Reporter: {
        screen: ReporterDrawerNavigator
    }
}, 
{
    initialRouteName: user === 'admin'? 'Admin': 'Reporter'
})
}

这一切都很好，但似乎 switchNavigator 似乎无法正常工作。如果我按下硬件的返回按钮，它会返回登录页面。感谢您的时间。请提出可能的解决方案。

标签： react-nativereact-navigation

解决方案

尝试重置您的历史导航：

NavigationActions.reset({
   index: 1,
   actions: [NavigationActions.navigate({ 
                  routeName: 'Admin' 
                }),
            ]
});

推荐阅读