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
- 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.
/**
* 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}}
/>
);
}
}Salin selepas log masuk
tutorial video reaksi "
