- 在
index.adroid.js文件中引入LaunchView和需要Navigator文件，當(dāng)APP啟動(dòng)時(shí) 第一個(gè)跳轉(zhuǎn)的頁(yè)面會(huì)LaunchView。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
// 引入LaunchView
var LaunchView = require('./Common/HJMain/LaunchView');
// 引入Navigator
import {Navigator} from 'react-native-deprecated-custom-components';
export default class buyDemo extends Component {
render() {
return (
<Navigator
initialRoute={{
name: '啟動(dòng)頁(yè)',
component:LaunchView //每次啟動(dòng)第一個(gè)跳轉(zhuǎn)頁(yè)面
}}
// configureScene={()=>{
// return Navigator.SceneConfigs.PushFromRight;
// }}
renderScene={(route, navigator) =>{
let Component = route.component;
return <Component {...route.passProps} navigator={navigator} />
}}
/>
);
}
}
const styles = StyleSheet.create({
});
AppRegistry.registerComponent('buyDemo', () => buyDemo);
- 在
LaunchView中設(shè)置頁(yè)面顯示的時(shí)間為多久再跳轉(zhuǎn)到我們APP中的Main界面，其中this.props.navigator.replace為替換當(dāng)前的LaunchView，而不在是用之前的Push.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
} from 'react-native';
// 引入外部組件
var Main = require('./HJMain');
export default class LaunchView extends Component {
render() {
return (
<Image source={{uri:'launchimage'}} style={styles.launchimageStyle}/>
);
}
componentDidMount(){
//設(shè)置2秒后跳轉(zhuǎn)到Main界面
setTimeout(()=> {
this.props.navigator.replace({
component: Main
})
},2000)
}
}
const styles = StyleSheet.create({
launchimageStyle: {
flex: 1,
},
});
module.exports = LaunchView;
-
Demo下載
-
運(yùn)行項(xiàng)目
- a）打開終端，輸入：cd
項(xiàng)目根目錄進(jìn)到項(xiàng)目目錄 ，進(jìn)到項(xiàng)目目錄 - b）輸入：npm install，下載node_modules
- c）運(yùn)行在iOS設(shè)備：react-native run-ios
- d）運(yùn)行在Android設(shè)備：react-native run-android
- a）打開終端，輸入：cd
-
