React Native Splashscreen实现

发布时间：2020-12-15 07:13:51 所属栏目：百科来源：网络整理

导读：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 Nav

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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!