react-native - 如何在 React Native 中构建登录和注册系统

Question

我正在用 React Native 制作一个登录和注册系统。我总共有 13 个屏幕，其中 4 个屏幕需要用户不登录，4 个屏幕需要用户登录，其余 5 个屏幕与登录状态无关。

我已成功将详细信息提取到应用程序中并将其存储在 AsyncStorage 中。然后我使用了两种不同类型的方法。

1. 我使用了下面提到的函数“check”[在渲染和组件中尝试过挂载和构造函数]来检查用户数据是否保存在 AsyncStorage 中，如果存在，我将用户重定向到“Home” ' 屏幕。 但是，只要我返回登录页面，我就不会被重定向。

2. 我制作了 3 个不同的导航器，一个是独立的，一个需要登录，一个不需要登录。这会产生一个问题，我无法从一个导航器导航到另一个导航器的特定屏幕.

   let check = AsyncStorage.getItem('user').then(res => {
     res = JSON.parse(res);
     typeof res == 'string'
       ? alert(res)
       : this.props.navigation.navigate('HomeScreen');
   

   . });

这里有两个问题。

1.有什么方法可以让我从一个导航器导航到另一个导航器中的特定屏幕？
2.达到我要求的结果的最佳方法是什么？

Answer 1

在createSwitchNavigator的帮助下你可以做到这一点 Auth Flow

设置我们的导航器

import { createSwitchNavigator, createStackNavigator, createAppContainer } 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 createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

实现我们的身份验证加载屏幕

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

class AuthLoadingScreen extends React.Component {
  constructor(props) {
    super(props);
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}