React Native Splashscreen实现

index.android.js

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';var TimerMixin = require('react-timer-mixin');import {  AppRegistry,} from 'react-native';import NavigationExperimental from 'react-native-deprecated-custom-components';var SplashScreen = require('./SplashScreen');export default class EDS extends Component {  render() {        var defaultComponent = SplashScreen;        return (            <NavigationExperimental.Navigator                initialRoute={{ name: 'Splash', component: defaultComponent }}                configureScene={(route) => {                    return NavigationExperimental.Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;                } }                renderScene={(route, navigator) => {                    let Component = route.component;                    return <Component {...route.params} navigator={navigator} />                } }                />        );    }}AppRegistry.registerComponent('EDS', () => EDS);

SplashScreen.js

'use strict'
import React, { Component } from 'react';
import {
  AppRegistry,
  Image,
  StyleSheet
} from 'react-native';
var Animated = require('Animated');
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('./res/splash.png') } style={styles.backimagestyle}/>
        );
    }
}
var styles = StyleSheet.create({
    backimagestyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: null,
        height: null,
        resizeMode: 'cover'
    }
});
module.exports = SplashScreen;

MainPage.js

'use strict'import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';//var MainPage = React.createClass({  export default class MainPage extends Component {    render() {        return (            <View>                <Text>                    hello world                </Text>            </View>        );    }}module.exports = MainPage;