React Native 二 登录注册功能

上一篇文章我们只是简单的搭了一个项目的首页和集成了react navigation导航跳转功能。在之前很多的项目都是需要强制登录逻辑，lanuch之后是登录页面，登录之后储存登录信息，下次直接进入首页。现在实现以下这个逻辑，
首先：我们要用到react navigation的 createSwitchNavigator这个组件

import {
 createSwitchNavigator,
}from 'react-navigation'

createSwitchNavigator

export default createAppContainer(createSwitchNavigator (
  {
    AuthLoading: AuthLoadingScreen,
    App: MainScreen,
    Auth: LoginStack
},
{
  initialRouteName: 'AuthLoading',
}
))

用AuthLoading 这个类去判断我们是否已经登录过了， 在AuthLoading决定跳转到login 还是主页。

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

  }

  _bootstrpsAsyns = async() =>{
    const userToken = await AsyncStorage.getItem('userToken');
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  }
  render (){
    return(<View>
      <ActivityIndicator/>
     <StatusBar barStyle = 'default'/>
    </View>)
  }
}

这里面需要用到AsyncStorage，读取是否存在用户信息。

import {
  AsyncStorage,
} from 'react-native'

以上是app.js里面的逻辑处理，接下来就是登录页的逻辑，布局相关的代码可以demo里进行查看（布局比较丑，勿喷）。
先写一个函数用来做登录处理：

_signInAsyncAction = async () => {
      await  AsyncStorage.setItem('userToken','abc')
         this.props.navigation.navigate('App')
     })
   }

涉及到IO操作，用异步去处理一下，接着写两个输入框和登录按钮，点击登录获取两个输入框的内容进行登录

image.png

constructor(props){
       super(props);
       this.state = {
           upText: null,
           bottomText: null,
       }
       this._signInAsyncAction = this._signInAsyncAction.bind(this)
   }

获取upText，bottomText 做登录请求

_signInAsyncAction = async () => {
    
     fetch(LoginApi,{
         method:'POST',
         headers:{
             Accept:'application/json',
             'Content-Type':'application/json',
         },
         body:JSON.stringify({
            phone:this.state.upText,
            password:this.state.bottomText,
         })
     })
     .then((response) => response.json())
     .then((responseJson) => {
         AsyncStorage.setItem('userToken','abc')
         this.props.navigation.navigate('App')
     })
     .catch((error) => {
       console.log(error);
       
     })
   }

在请求成功之后做相应的跳转就可以了。
demo地址 希望对您有所帮组！