React Native 之引导页与登录状态的切换

作为2018年的第一篇文章，一个新的开始，小编决定用一个项目来记录自己学习RN的过程，废话不多说，直接开始：
项目链接：https://itunes.apple.com/us/app/freightx/id1304817855?l=zh&ls=1&mt=8

一.引导页

引导页作为一个app的开始，我们这里分两种介绍：

（一）静态图片

简单的引导页，我采用的react-native-splash-screen第三方框架
链接如下：
https://github.com/crazycodeboy/react-native-splash-screen
具体实现文档很清楚不赘余。

（二）动态图片

可以采用react-native-app-intro
链接：https://github.com/FuYaoDe/react-native-app-intro

二.登录状态及控制器切换

在app中记录用户登录状态也是很常见的功能，这里我用的是AsyncStorage

AsyncStorage.multiSet(
[['accessToken', data.data.accessToken],
['userName', data.data.name]],)

var keys = ["accessToken", "userName",];
//根据键数组查询保存的键值对
AsyncStorage.multiGet(keys, function (errs, result) {
//如果发生错误，这里直接返回（return）防止进入下面的逻辑
if (errs) {
_that.setState({
isLogin: false,
isLoaded: true
})
return;
}
//得到的结果是二维数组（result[i][0]表示我们存储的键，result[i][1]表示我们存储的值）
// console.log("result===" + result[0][1]);
if (result[0][1] != null) {
_that.setState({
isLogin: true,
isLoaded: true
})
global.userToken = result[0][1]
} else {
_that.setState({
isLogin: false,
isLoaded: true
})
}
if (result[1][1] != null&&result[2][1] != null) {
global.userName = result[1][1];
}

});

但是有个问题AsyncStorage本身是异步读取，所以在这里没办法切换控制器，所以要通过监听来实现切换

this.msgListener = DeviceEventEmitter.addListener('change', (listenerMsg) => {
this.setState({
isLogin: !this.state.isLogin,
})


});

在登录和注销是发通知来切换

DeviceEventEmitter.emit('change', '修改');

但是由于AsyncStorage的异步导致加载出现一段白屏，我们通过加载一个延迟页面

if (!this.state.isLoaded) {
return (
<View style={styles.container1}>
<ActivityIndicator style={styles.indicator}/>
</View>
)
} else {
return (
<View style={styles.container}>
{mainView}
</View>
);
}

到这里基本的登录与主页面的切换以及登录缓存就实现了