91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何用react實現引導頁

發布時間:2023-01-06 17:30:17 來源:億速云 閱讀:130 作者:iii 欄目:web開發

本篇內容主要講解“如何用react實現引導頁”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“如何用react實現引導頁”吧!

用react實現引導頁的方法:1、創建一個啟動界面,代碼如“import React, { Component } from 'react';import{AppRegistry,StyleSheet,Text,View,AsyncStorage...}”;2、判斷每次啟動,獲取之前是否保存過第一次加載的屬性,如果加載過就顯示主頁,沒加載過就顯示引導頁。

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實現引導頁

引導頁

以后進入,就直接主頁

如何用react實現引導頁

到此,相信大家對“如何用react實現引導頁”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

濉溪县| 阜城县| 绥中县| 浦县| 镇平县| 莆田市| 南昌县| 成安县| 宜君县| 马鞍山市| 凤城市| 延庆县| 郑州市| 宁城县| 西充县| 墨脱县| 五原县| 呼和浩特市| 台安县| 吉林省| 阳泉市| 蚌埠市| 泰安市| 九江市| 龙门县| 莱芜市| 甘南县| 右玉县| 新宾| 盐源县| 吉水县| 峡江县| 怀柔区| 新丰县| 东台市| 昭通市| 赤水市| 司法| 阳谷县| 清苑县| 江西省|