• 在index.adroid.js文件中引入LaunchView和需要Navigator文件，当APP启动时 第一个跳转的页面会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: '启动页', 
              component:LaunchView //每次启动第一个跳转页面
            }}
            
            // 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中设置页面显示的时间为多久再跳转到我们APP中的Main界面，其中this.props.navigator.replace为替换当前的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(){
        //设置2秒后跳转到Main界面
        setTimeout(()=> {
            this.props.navigator.replace({
               component: Main
            })
        },2000)

    }
}



const styles = StyleSheet.create({
    launchimageStyle: {
        flex: 1,

    },
});

module.exports = LaunchView;

• Demo下载

  • 运行项目

    • a）打开终端，输入：cd 项目根目录 进到项目目录 ，进到项目目录
    • b）输入：npm install，下载node_modules
    • c）运行在iOS设备：react-native run-ios
    • d）运行在Android设备：react-native run-android