react-native - 在用户未通过身份验证的情况下路由到 native 登录屏幕

Question

我看过很多其他库如何完成的示例，但我使用的是 react-navigation一个，需要一个解决方案。

这是一个代码示例:

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;

您可以在此处找到完整的应用程序代码:https://snack.expo.io/Hy8IXWppg

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

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

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

我知道我可以用下面的代码做到这一点

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

在屏幕组件内(其中 userIsLoggedIn 是我的自定义身份验证检查方法)，但我不想在每个组件中手动执行此操作。但即使我别无选择，在哪里放置 userIsLoggedIn() 检查？在 constructor/componentWillMount/componentWillUpdate 里面？

更新

我希望有一个解决方案可以让我指定所有需要身份验证的屏幕/路由。

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

我要有 3 级导航

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

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

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

Answer 1

我认为您应该有另一个屏幕作为您的第一个屏幕。这可以是一个简单的组件，它只是一个 ActivityIndi​​cator。因为你应该检查你的服务器并相应地导航。

例。初始组件

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>);

}

这也有利于向您的用户显示您正在处理某些事情，然后再重定向他们(例如，如果请求需要时间)。