时间戳

首页 > 解决方案 > 如何在 react native 中构建登录和注册系统

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

问题描述

我正在做一个反应原生的登录和注册系统。我总共有 13 个屏幕，其中 4 个屏幕需要人不登录，4 个屏幕需要人登录，其余 5 个与登录状态无关。

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

  1. 我已经使用下面提到的函数“检查”[在渲染中尝试过，组件确实安装和构造函数]来执行用户数据是否保留在 AsyncStorage 中，如果存在，我已将用户重定向到“主”屏幕。但是，每当我返回登录页面时，这都有效，我没有被重定向。

  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.达到我要求的结果的最佳方法是什么？

标签： react-nativereact-native-androidreact-native-navigation

解决方案

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

推荐阅读