您好,登錄后才能下訂單哦!
本篇內容主要講解“如何用react實現引導頁”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“如何用react實現引導頁”吧!
用react實現引導頁的方法:1、創建一個啟動界面,代碼如“import React, { Component } from 'react';import{AppRegistry,StyleSheet,Text,View,AsyncStorage...}”;2、判斷每次啟動,獲取之前是否保存過第一次加載的屬性,如果加載過就顯示主頁,沒加載過就顯示引導頁。
在RN中實現引導頁,相比原生實現復雜多了。
原因:
1.RN中不能讀取原生的配置信息info.plist文件,這樣也就沒法判斷當前是不是最新版本,是最新版本就展示引導頁
2.RN的本地存儲是異步的,不是同步的,這樣就導致在一開始的時候,想去獲取本地存儲信息,根據存儲信息判斷顯示引導頁還是主頁,就會報錯
報錯原因很簡單,程序一啟動,就需要立馬顯示界面,但是由于異步,并不能那么快返回.
自己寫一個啟動界面,一開始的時候顯示啟動界面
然后在顯示完啟動界面的方法,去判斷待會顯示引導頁,還是主頁
第一次進入界面,寫個屬性,記錄下第一次加載。
每次啟動,獲取之前是否保存過第一次加載的屬性,如果加載過,就顯示主頁,沒加載過,就顯示引導頁
/**
* 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實現引導頁”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。