React Native Splashscreen实现

最新推荐文章于 2024-08-22 09:20:08 发布

原创最新推荐文章于 2024-08-22 09:20:08 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native

React Native 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用React Native实现的应用程序启动页和导航的基本结构。通过定义SplashScreen组件作为初始加载界面，并在加载完成后自动跳转到MainPage组件。此外，还利用了NavigationExperimental进行页面间的导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;