React Native Splashscreen实现

最新推荐文章于 2024-11-15 11:30:42 发布

苦行僧Sco

最新推荐文章于 2024-11-15 11:30:42 发布

阅读量307

点赞数

分类专栏： React Native 文章标签： react native

本文链接：https://blog.csdn.net/kuxingseng733132/article/details/74679101

版权

React Native 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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;