前言
眼看很多公司都開始嘗試使用ReactNative,達到跨平臺開發，最近也寫了很多文章，希望讓更多想了解的同學快速上手ReactNative.
ReactNative之App引導頁實現邏輯
- 在RN中實現引導頁，相比原生實現複雜多了。
- 原因：
- 1.RN中不能讀取原生的設定資訊info.plist檔案，這樣也就沒法判斷當前是不是最新版本，是最新版本就展示引導頁
- 2.RN的本地儲存是非同步的，不是同步的，這樣就導致在一開始的時候，想去獲取本地儲存資訊，根據儲存資訊判斷顯示引導頁還是主頁，就會報錯
- 報錯原因很簡單，程式一啟動，就需要立馬顯示介面，但是由於非同步，並不能那麼快返回.
RN引導頁解決思路:
- 自己寫一個啟動介面，一開始的時候顯示啟動介面
- 然後在顯示完啟動介面的方法，去判斷待會顯示引導頁，還是主頁
如何判斷顯示引導頁還是主頁
- 第一次進入介面，寫個屬性，記錄下第一次載入。
- 每次啟動，獲取之前是否儲存過第一次載入的屬性，如果載入過，就顯示主頁，沒載入過，就顯示引導頁
App引導頁實現程式碼
/**
* Created by ithinkeryz on 2017/5/15.
*/
import React, { Component } from 'react';import {
AppRegistry,
StyleSheet,
Text,
View,
AsyncStorage,
Image} from 'react-native';import Main from './Main/Main'import {Navigator} from 'react-native-deprecated-custom-components'import Guide from './Guide/Guide'import Common from './Common/Common'class LaunchView extends Component {
render(){
return (
<Image source={{uri:'LaunchImage'}} style={{width:Common.screenW,height:Common.screenH}}/>
)
}
componentDidMount() {
// 延遲點
setTimeout(this.openApp.bind(this),2000);
// this.openApp();
}
openApp(){
AsyncStorage.getItem('isFirst',(error,result)=>{
if (result == 'false') {
console.log('不是第一次開啟');
this.props.navigator.replace({
component:Main })
} else {
console.log('第一次開啟');
// 儲存
AsyncStorage.setItem('isFirst','false',(error)=>{
if (error) {
alert(error);
}
});
this.props.navigator.replace({
component:Guide })
}
});
}}export default class App extends Component {
// 渲染場景
_renderScene(route, navigator){
return (
<route.component navigator={navigator} {...route} />
)
}
render() {
// 判斷是不是第一次開啟
return (
<Navigator initialRoute={{
component: LaunchView }}
renderScene={this._renderScene.bind(this)}
style={{flex:1}}
/>
);
}
}登入後複製實現效果
第一次進入
啟動頁
引導頁
以後進入，就直接主頁
主頁
推薦學習：《》