React native 如果用户未通过身份验证，则路由到react native中的登录屏幕

我已经看到了很多关于其他库的例子，但是我正在使用一个，需要一个解决方案

下面是一个代码示例：

const MainTabs = TabNavigator({
  Profile: { screen: ProfileScreen },
  Home: { screen: HomeScreen },
});

const RootNavigator = StackNavigator({
  Main:  { screen: MainTabs },
  Login: { screen: LoginScreen },
},{
  initialRouteName: "Login",
  headerMode: "none",
});

export default RootNavigator;

您可以在此处找到完整的应用程序代码：

已在我的服务器上检查用户身份验证状态

我希望在应用程序启动时为用户呈现登录屏幕，以防用户未经身份验证，但在理想情况下，如果用户的会话在服务器上被删除/过期，则最好将用户路由到登录

换句话说，我希望能够在任何时间从任何代码部分执行此操作

我知道我可以用下面这样的代码来完成

if(!userIsLoggedIn()) {
    this.props.navigation.dispatch(
        NavigationActions.navigate({routeName: 'Login'}) );
}

在屏幕组件内部（其中，

userIsLoggedIn

是我的自定义身份验证检查方法），但我不想在每个组件中手动执行此操作。但即使是我也别无选择，把

userIsLoggedIn（）

check放在哪里？内部Constructor/componentWillMount/componentWillUpdate

更新

我希望有一个解决方案，允许我指定所有需要身份验证的屏幕/路由

在我看来，我必须在这里使用带有一些自定义规则的路由。 但是有两种标准路由器：TabRouter和StackRouter

我将使用三级导航

StackNavigator
   LoginScreen
   RegisterScreen
   AboutScreen
   FirstLevelTabNavigator
       Tab1: AccountScreen
       Tab2: SecondLevelTabNavigator
           Tab1Screen
           Tab2Screen
           Tab3Screen

显然，登录、注册和关于屏幕不需要身份验证，但在尝试访问帐户时，必须将Tab1Screen、Tab2Screen或Tab3Screen用户重定向到LoginsScreen

---

我现在应该为每个导航器构建3个路由器吗？

我认为您应该有另一个屏幕，这将是您的第一个屏幕。这可以是一个简单的组件，只是一个

活动指示器

。在这种情况下，您应该检查您的服务器并相应地导航

前。 初始组件

componentWillMount() {

     getStatus(this.navigate.bind(this))
}

navigate(loggedIn) {
   this.setState({animating: false});
   if(loggedIn) {
      navigate to Main
   } else {
      navigate to Login
   }    
  }

render() {
  return(<View> <ActivityIndicator animating={this.state.animating}/> </View>);

}

componentWillMount（）{
getStatus（this.navigate.bind（this））
}
导航（loggedIn）{
this.setState（{animating:false}）；
if（loggedIn）{
导航到Main
}否则{
导航到登录
}    
}
render（）{
返回（）；
}

---

这也有助于在重定向之前向用户显示您正在处理某些内容（例如，如果请求需要时间）。

您需要使用SwitchNavigator进行此操作。React导航文档在此解释如何执行身份验证流程：

以下示例来自他们的文档：

从“反应导航”导入{createSwitchNavigator，createStackNavigator}；
//主屏幕、其他屏幕、登录屏幕、AuthLoadingScreen的实现
//到这里来。
const-AppStack=createStackNavigator（{Home:HomeScreen，Other:OtherScreen}）；
const AuthStack=createStackNavigator（{SignIn:SignInScreen}）；
导出默认createSwitchNavigator(
{
AuthLoading:AuthLoadingScreen，
应用程序：AppStack，
Auth:AuthStack，
},
{
initialRouteName:“AuthLoading”，
}
);

然后，您可以执行如下操作：

    this.props.navigation.navigate(userToken ? 'App' : 'Auth');

---

嗨，gumkins，我有完全相同的用例，你找到上面问题的答案了吗？在哪里放置userIsLoggedIn，您是否构建了自定义路由器？嗨，不，我现在已切换到其他应用程序区域。作为一个临时解决方案，我将在每次应用发布时导航到登录屏幕。