用react实现引导页的方法：1、创建一个启动界面，代码如“import react, { component } from 'react';import{appregistry,stylesheet,text,view,asyncstorage...}”；2、判断每次启动，获取之前是否保存过第一次加载的属性，如果加载过就显示主页，没加载过就显示引导页。
本教程操作环境：windows10系统、react18.0.0版、dell g3电脑。
怎么用react实现引导页？
前言眼看很多公司都开始尝试使用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}} /> ); } }
实现效果第一次进入
启动页
引导页
以后进入，就直接主页
主页
推荐学习：《react视频教程》
以上就是怎么用react实现引导页的详细内容。