react-native-闪屏页

最新推荐文章于 2024-08-09 07:36:52 发布

time_iter

最新推荐文章于 2024-08-09 07:36:52 发布

阅读量3k

点赞数

分类专栏： android提升文章标签： react

本文链接：https://blog.csdn.net/tiem_erhu/article/details/51086219

版权

android提升专栏收录该内容

44 篇文章 0 订阅

订阅专栏

//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>
        );
    }
}