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

1.Main 目录下新建LaunchImage.js:

/**
 * 启动页
 */
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:

/**
 * android
 */
import React, { Component } from 'react';
import {
    AppRegistry,
} from 'react-native';

/*==============导入外部组件================*/
import CustomerComponents, { Navigator } from 'react-native-deprecated-custom-components';
var LaunchImage = require('./Component/Main/LaunchImage');

class BuyDemo extends Component {
    render() {
        return (
            <Navigator
                initialRoute={{name: '启动页', component:LaunchImage}}
                renderScene={(route, navigator) =>{
                    let Component = route.component;
                    return <Component {...route.passProps} navigator={navigator} />
                }}
            />
        );
    }
}

AppRegistry.registerComponent('BuyDemo', () => BuyDemo);

.