使用 react-native-router-flux 加载应用程序后如何隐藏启动画面答案

【问题标题】：How to Hide Splash screen once the App is loaded in react native using react-native-router-flux使用 react-native-router-flux 加载应用程序后如何隐藏启动画面
【发布时间】：2019-04-22 11:30:00
【问题描述】：

我的应用中有启动画面，5 秒后它会导航到另一个屏幕。

我想要的是启动画面应该只在第一次加载应用程序时显示，一旦用户退出应用程序并再次打开它，它就不应该显示启动画面。

这是我的代码

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 进行导航

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

【问题讨论】：

标签： react-native

【解决方案1】：

这是您使用的解决方法。尝试使用 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()方法会帮你在你提到的区间内重定向到特定的屏幕！！

【讨论】：