作为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>
);
}
到这里基本的登录与主页面的切换以及登录缓存就实现了
