React Native商城项目实战06 - 设置安卓中的启动页

1.Mian/目录下新建LaunchImage.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';

/*==============导入外部组件================*/
var Main = require('./Main');

// ES5
var Launch = React.createClass({
    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 = Launch;

2.修改index.android.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator
} from 'react-native';

/*==============导入外部组件================*/
var LaunchImage = require('./Component/Main/LaunchImage');

class BuyDemo extends Component {
  render() {
    return (
        <Navigator
            initialRoute={{name: '启动页', component:LaunchImage}}
            // 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);