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

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

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

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

我知道我可以使用下面的代码执行此操作

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

在屏幕组件内部（其中userIsLoggedIn是我的自定义身份验证方法），但我不想在每个组件中手动执行此操作。但即使我没有其他选择，在哪里进行userIsLoggedIn()检查？在consctructor / componentWillMount / componentWillUpdate？

中

更新

我期待一种解决方案，它允许我指定需要身份验证的所有屏幕/路由。

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

我将进行3级导航

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

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

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

Answer 1

我认为你应该有另一个屏幕，这将是你的第一个屏幕。这可以是一个简单的组件，只是ActivityIndicator。在那里你应该检查你的服务器并相应地导航。

实施例。 InitialComponent

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

}

在重定向之前，这也可以向您的用户显示您正在处理的内容（例如，如果请求需要时间）。

Answer 2

您需要为此使用SwitchNavigator。 React Navigation文档在此处解释了如何执行身份验证流程：

https://reactnavigation.org/docs/en/auth-flow.html

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

echo $data | grep "credentials"
echo $data | jq -e '.credentials[]|{}' -c

然后您进行导航，如下所示：

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

在用户未经过身份验证的情况下，以本机方式路由到“登录”屏幕

2 个答案: