Expo（ReactNative）でSplashの表示時間（消すタイミング）を制御する

expoでsplashの表示を制御したい。

• SplashScreen.preventAutoHide()
• SplashScreen.Hide()

とかを組み合わせてるとできるみたい。詳しくはこちらを。

とりあえず、3秒待ってみる。

実際はコンテンツのロードとかを待つ感じかと。

componentDidMount()でSplash画面が自動的に消えるのを阻止し、後はお好みのタイミングでSplashScreen.Hide()とする。

App.js

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { SplashScreen } from 'expo';

export default class App extends React.Component {

    //Splashのステータス管理（標準false）
    state = {
        isReady: false,
    }

    //Splashが自動的に消えるのを防止
    componentDidMount() {
        SplashScreen.preventAutoHide();
    }

    render() {
        //ステータスがfalseなら
        if (!this.state.isReady) {
            return (
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image
                        source={require('./assets/splash.png')} //いちおうSplashと同じ画像を表示（関係ないみたい）
                        onLoad={this.updateAsync} //読み込みが終わったらCallbackをキック
                    />
                </View>
            );
        }

        //標準画面（Splash後に表示）
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>hoge</Text>
            </View>
        );
    }

    //コールバック
    //3秒待って、splash画面を隠す。そしてステータスをtrueに。
    updateAsync = async () => {
        await sleep(3000);
        SplashScreen.hide();
        this.setState({ isReady: true })
    }
}

//sleepコマンド作成
export const sleep = (sec) => {
    return new Promise(resolve => {
        setTimeout(resolve, sec);
    })
}