React Native 中的身份验证流程答案

【问题标题】：Authentication Flow in React NativeReact Native 中的身份验证流程
【发布时间】：2019-10-16 19:59:06
【问题描述】：

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

默认情况下，我创建了一个 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-native react-navigation

【解决方案1】：

尝试重置您的历史导航：

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

【讨论】：

我在哪里添加这个 NavigationActions？