まえがき
多くの企業が 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:'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}}
/>
);
}
}
実績効果初回入力
