作為2018年的第一篇文章，一個(gè)新的開(kāi)始，小編決定用一個(gè)項(xiàng)目來(lái)記錄自己學(xué)習(xí)RN的過(guò)程锉走，廢話不多說(shuō)，直接開(kāi)始：
項(xiàng)目鏈接：https://itunes.apple.com/us/app/freightx/id1304817855?l=zh&ls=1&mt=8
一.引導(dǎo)頁(yè)
引導(dǎo)頁(yè)作為一個(gè)app的開(kāi)始藕届，我們這里分兩種介紹：
（一）靜態(tài)圖片
簡(jiǎn)單的引導(dǎo)頁(yè)挪蹭，我采用的react-native-splash-screen第三方框架
鏈接如下：
https://github.com/crazycodeboy/react-native-splash-screen
具體實(shí)現(xiàn)文檔很清楚不贅余。
（二）動(dòng)態(tài)圖片
可以采用react-native-app-intro
鏈接：https://github.com/FuYaoDe/react-native-app-intro
二.登錄狀態(tài)及控制器切換
在app中記錄用戶登錄狀態(tài)也是很常見(jiàn)的功能休偶，這里我用的是AsyncStorage
AsyncStorage.multiSet(
[['accessToken', data.data.accessToken],
['userName', data.data.name]],)
var keys = ["accessToken", "userName",];
//根據(jù)鍵數(shù)組查詢保存的鍵值對(duì)
AsyncStorage.multiGet(keys, function (errs, result) {
//如果發(fā)生錯(cuò)誤梁厉，這里直接返回（return）防止進(jìn)入下面的邏輯
if (errs) {
_that.setState({
isLogin: false,
isLoaded: true
})
return;
}
//得到的結(jié)果是二維數(shù)組（result[i][0]表示我們存儲(chǔ)的鍵，result[i][1]表示我們存儲(chǔ)的值）
// 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];
}
});
但是有個(gè)問(wèn)題AsyncStorage本身是異步讀取椅贱，所以在這里沒(méi)辦法切換控制器懂算，所以要通過(guò)監(jiān)聽(tīng)來(lái)實(shí)現(xiàn)切換
this.msgListener = DeviceEventEmitter.addListener('change', (listenerMsg) => {
this.setState({
isLogin: !this.state.isLogin,
})
});
在登錄和注銷是發(fā)通知來(lái)切換
DeviceEventEmitter.emit('change', '修改');
但是由于AsyncStorage的異步導(dǎo)致加載出現(xiàn)一段白屏，我們通過(guò)加載一個(gè)延遲頁(yè)面
if (!this.state.isLoaded) {
return (
<View style={styles.container1}>
<ActivityIndicator style={styles.indicator}/>
</View>
)
} else {
return (
<View style={styles.container}>
{mainView}
</View>
);
}
到這里基本的登錄與主頁(yè)面的切換以及登錄緩存就實(shí)現(xiàn)了
