一旦应用程序使用react-native-router-flux在react native中加载,如何隐藏启动画面

时间:2019-04-22 11:30:00

标签: react-native

我的应用程序中有启动屏幕,五秒钟后它将导航到另一个屏幕。

我想要的是启动屏幕仅在加载应用程序时才显示,并且一旦用户退出该应用程序并打开它,那么它就不应显示启动屏幕。

这是我的代码

import React, { Component } from 'react';
import { View, ImageBackground, StyleSheet, BackHandler, Alert } from 'react-native';
import { Actions } from 'react-native-router-flux';
import colors from '../styles/colors';

class SplashScreen extends Component {

    componentDidMount() {
        // Start counting when the page is loaded
        this.timeoutHandle = setTimeout(() => {
            Actions.welcome()
        }, 5000);
    }

    render() {
        return (
            <View style={styles.container}>
                <ImageBackground
                    source={require('../assets/BSWH-splash.jpg')}
                    style={styles.backgroundImage}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    backgroundImage: {
        resizeMode: 'stretch',
        flex: 1,
    },
    logoText: {
        fontSize: 34,
        color: colors.white,
        margin: 10,
    },
});
export default SplashScreen;

我已经使用react-native-router-flux进行导航

请帮助我在加载应用后如何隐藏启动画面。

1 个答案:

答案 0 :(得分:0)

这是您使用的替代方法。尝试使用npm软件包以获得理想的结果,而最好的npm软件包是crazycodeboy/react-native-splash-screen

您可以使用Splashscreen.hide()函数在componentDidMount方法中隐藏SplashScreen。

但是,如果您仍然想使用此方法,则可以尝试

componentDidMount() {
    setTimeout( () => {this.load()}, 2500);       
    }
    load = () => {
      Actions.StartOrder()   //Go to StartOrder screen in 2500ms or 2.5secs
    }

在这里,JS的setTimeout()方法将帮助您在提到的时间间隔内重定向到特定屏幕!