前言
眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.
如果喜欢我的文章，可以关注我微博:袁峥Seemygo
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}}
/>
);
}
}
实现效果
- 第一次进入
启动页.png
引导页.png
- 以后进入，就直接主页
主页.png
