React|React Native 二登录注册功能 ReactNative二登录注册功能

上一篇文章我们只是简单的搭了一个项目的首页和集成了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() } }

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

import { AsyncStorage, } from 'react-native'

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

_signInAsyncAction = async () => { awaitAsyncStorage.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); }) }

【React|React Native 二登录注册功能】在请求成功之后做相应的跳转就可以了。
demo地址希望对您有所帮组！