서문
크로스 플랫폼 개발을 위해 ReactNative를 사용하려는 기업이 많아지는 것을 보고, 더 빨리 알고 싶은 학생들이 ReactNative를 시작할 수 있기를 바라는 마음으로 최근에 많은 글을 썼습니다.
ReactNative의 앱 가이드 페이지 구현 로직
- RN에서 가이드 페이지를 구현하는 것은 네이티브 구현보다 훨씬 더 복잡합니다.
- 이유:
- 1. 기본 구성 정보 info.plist 파일은 RN에서 읽을 수 없으므로 현재 버전이 최신 버전인지 판단이 불가능합니다.
- 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}}
/>
);
}
}성취 효과
시작 페이지
입력 후 홈페이지로 바로 이동
Homepage