Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Cara menggunakan react untuk melaksanakan halaman but

Cara menggunakan react untuk melaksanakan halaman but

藏色散人
Lepaskan: 2023-01-06 15:44:27
asal
2102 orang telah melayarinya

Cara menggunakan react untuk melaksanakan halaman but: 1. Buat antara muka permulaan dengan kod seperti "import React, { Component } from 'react'; import{AppRegistry,StyleSheet,Text,View,AsyncStorage. ..} "; 2. Tentukan setiap permulaan dan dapatkan sama ada atribut yang dimuatkan buat kali pertama telah disimpan sebelum ini. Jika ia telah dimuatkan, halaman utama akan dipaparkan. Jika ia belum dimuatkan, halaman but akan dipaparkan.

Cara menggunakan react untuk melaksanakan halaman but

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menggunakan reaksi untuk melaksanakan halaman panduan?

Kata Pengantar

Memandangkan banyak syarikat mula cuba menggunakan ReactNative untuk mencapai pembangunan merentas platform, saya juga telah menulis banyak artikel baru-baru ini, dengan harapan dapat membantu lebih ramai pelajar yang ingin mengetahui lebih lanjut mulakan dengan cepat ReactNative.

Logik pelaksanaan halaman but Apl ReactNative

  • Melaksanakan halaman but dalam RN adalah jauh lebih rumit daripada pelaksanaan asli.
  • Sebab:
  • 1 Fail info.plist konfigurasi asli tidak boleh dibaca dalam RN, jadi adalah mustahil untuk menilai sama ada versi semasa adalah versi terkini versi, halaman but akan dipaparkan
  • 2 Storan tempatan RN adalah tak segerak, tidak segerak Ini akan menyebabkan ralat dilaporkan pada permulaan jika anda ingin mendapatkan maklumat storan setempat dan menilai sama ada untuk memaparkan halaman but atau halaman utama berdasarkan maklumat storan
    • Sebab ralat adalah sangat mudah Sebaik sahaja program bermula, antara muka perlu dipaparkan dengan segera, tetapi kerana tidak segerak, ia tidak boleh kembali begitu cepat.

Penyelesaian ke halaman but RN:

  • Tulis sendiri antara muka permulaan >
  • Kemudian selepas antara muka permulaan dipaparkan, anda boleh menentukan sama ada untuk memaparkan halaman but atau halaman utama
Bagaimana untuk menentukan sama ada untuk memaparkan halaman but atau halaman utama

    Masukkan antara muka untuk kali pertama, tulis atribut dan rekodkan beban pertama.
  • Setiap kali ia dimulakan, dapatkan sama ada atribut yang dimuatkan untuk kali pertama telah disimpan sebelum ini. Jika ia telah dimuatkan, halaman utama akan dipaparkan Jika ia belum dimuatkan, halaman but akan dipaparkan.
Halaman but apl Laksanakan kod

/**
 * 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}}
            />
        );


    }
    }
Salin selepas log masuk
Mencapai kesan

Masukkan

Cara menggunakan react untuk melaksanakan halaman but
Halaman mula
Cara menggunakan react untuk melaksanakan halaman but
Halaman panduan
Selepas masuk, pergi terus ke halaman utama

Cara menggunakan react untuk melaksanakan halaman but
Halaman utama

Pembelajaran yang disyorkan: "

tutorial video reaksi "

Atas ialah kandungan terperinci Cara menggunakan react untuk melaksanakan halaman but. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan