react-native-闪屏页

来源：互联网发布：分享做淘宝的经验编辑：程序博客网时间：2024/06/06 03:07

//index.android.js

'use strict';import React, {    AppRegistry,    Component,    Navigator,} from 'react-native';import SplashScreen from './splash.js'index.android.jsclass 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>        );    }}

0 0