React を使用してブート ページを実装する方法

まえがき

多くの企業が ReactNative を使用してクロスプラットフォーム開発を実現しようと試み始めているのを見て、私も最近、より多くの学生を支援したいと考えて多くの記事を書きました。 ReactNative.

ReactNative のアプリ ガイド ページの実装ロジック

• RN でのガイド ページの実装は、ネイティブ実装よりもはるかに複雑です。
• 理由:
• 1. RN ではネイティブ構成情報 info.plist ファイルを読み取れないため、現在のバージョンが最新バージョンであるかどうかを判断できません。
• 2. RN のローカル ストレージは非同期であり、同期ではないため、ローカル ストレージの情報を取得して、ローカル ストレージの情報を取得するかどうかを判断したい場合、最初にエラーが報告されます。ストレージ情報に基づいてブート ページまたはホームページを表示するには
  • エラーの理由は非常に単純で、プログラムが起動したらすぐにインターフェイスを表示する必要がありますが、非同期であるため表示できません。

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:&#39;LaunchImage&#39;}} style={{width:Common.screenW,height:Common.screenH}}/>
        )
    }

    componentDidMount() {
        // 延迟点
        setTimeout(this.openApp.bind(this),2000);
        // this.openApp();
    }

    openApp(){
        AsyncStorage.getItem(&#39;isFirst&#39;,(error,result)=>{

            if (result == &#39;false&#39;) {
                console.log(&#39;不是第一次打开&#39;);

                this.props.navigator.replace({
                    component:Main                })

            } else  {

                console.log(&#39;第一次打开&#39;);

                // 存储
                AsyncStorage.setItem(&#39;isFirst&#39;,&#39;false&#39;,(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 ビデオ チュートリアル##」 #"