react-native-闪屏页

//index.android.js

'use strict';
import React, {
    AppRegistry,
    Component,
    Navigator,
} from 'react-native';

import SplashScreen from './splash.js'

index.android.js
class AwesomeProject extends Component {
    render() {
        var defaultComponent = SplashScreen;
        return (
            <Navigator
                initialRoute={{ name: 'Splash', component: defaultComponent }}
                configureScene={(route) => {
                    return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
                } }
                renderScene={(route, navigator) => {
                    let Component = route.component;
                    return <Component {...route.params} navigator={navigator} />
                } }
                />
        );
    }
}

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

//splash.js

'use strict'
import React, {
    Component,
    Image,
    StyleSheet,
} from 'react-native'

import MainPage from './mainpage.js';

export default class SplashScreen extends Component {
    constructor(props) {
        super(props);
        var {navigator} = props;
        setTimeout(() => { navigator.replace({ name: 'MainPage', component: MainPage }) }, 1000); } render() { return( <Image source={require('./img/hello.jpg') } style={styles.backimagestyle}/> ); } } const styles = StyleSheet.create({ backimagestyle: { flex: 1, justifyContent: 'center', alignItems: 'center', width: null, height: null, resizeMode: 'cover' } }); 

//mainpage.js

'use strict'
import React, {
    Component,
    Image,
    StyleSheet,
    View,
    Text,
} from 'react-native'

export default class MainPage extends Component {
    render() {
        return (
            <View>
                <Text>
                    hello world
                </Text>
            </View>
        );
    }
}