반응을 사용하여 부팅 페이지를 구현하는 방법-프런트엔드 Q&A-php.cn

반응을 사용하여 부팅 페이지를 구현하는 방법

藏色散人

풀어 주다： 2023-01-06 15:44:27

원래의

2102명이 탐색했습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

리액트를 사용하여 가이드 페이지를 구현하는 방법은 무엇인가요?

서문

크로스 플랫폼 개발을 위해 ReactNative를 사용하려는 기업이 많아지는 것을 보고, 더 빨리 알고 싶은 학생들이 ReactNative를 시작할 수 있기를 바라는 마음으로 최근에 많은 글을 썼습니다.

ReactNative의 앱 가이드 페이지 구현 로직

RN에서 가이드 페이지를 구현하는 것은 네이티브 구현보다 훨씬 더 복잡합니다.
이유:
1. 기본 구성 정보 info.plist 파일은 RN에서 읽을 수 없으므로 현재 버전이 최신 버전인지 판단이 불가능합니다.
2. RN의 로컬 저장소는 동기식이 아닌 비동기식입니다. 즉, 처음에 로컬 저장소 정보를 얻고 해당 저장소 정보를 기반으로 부팅 페이지를 표시할지 아니면 홈 페이지를 표시할지 판단하는 경우 오류가 보고됩니다
- 오류의 원인은 매우 간단합니다. 프로그램이 시작되자마자 즉시 인터페이스가 표시되지만 비동기로 인해 그렇게 빨리 반환할 수는 없습니다.

해결책 RN 부팅 페이지:

시작 인터페이스를 직접 작성하고 시작 인터페이스를 처음에 표시합니다
그리고 시작 인터페이스가 표시된 후 나중에 부팅 페이지를 표시할지 아니면 홈페이지를 표시할지 결정합니다

방법 부팅 페이지가 표시될지 홈페이지가 표시될지 결정하려면

처음으로 인터페이스에 들어가서 속성을 쓰고 첫 번째 로드를 기록하세요.
시작할 때마다 첫 번째 로드된 속성이 이전에 저장되었는지 확인합니다. 로드된 경우 홈페이지가 표시됩니다. 로드되지 않은 경우

앱 부팅이 표시됩니다. 페이지 구현 코드

/**
 * Created by ithinkeryz on 2017/5/15.
 */
 import React, { Component } from &#39;react&#39;;import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    AsyncStorage,
    Image} from &#39;react-native&#39;;import Main from &#39;./Main/Main&#39;import {Navigator} from &#39;react-native-deprecated-custom-components&#39;import Guide from &#39;./Guide/Guide&#39;import Common from &#39;./Common/Common&#39;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}}
            />
        );


    }
    }

로그인 후 복사

성취 효과

시작 페이지

입력 후 홈페이지로 바로 이동

Homepage