【React-Native】启动App初始化页面时的白屏问题

[famousczm]

问题描述

启动App时总会有一段白屏才显示第一个页面，用户体验非常不好，这段白屏其实就是App的初始化阶段，躲不了，所以各大App都会在初始化App的时候显示一个启动页来代替这难看的白屏，初始化完就直接显示指定的页面，体验效果直线提升。

解决方法

其实白屏并没有消失，只是用一个启动页先遮挡住，等待初始化完再移除启动页而已。难点就在于怎么控制这个启动页的显示和消失，因为启动页是在原生上做的。

接下来隆重介绍 react-native-splash-screen 组件，它完美地解决了我的问题。配置详情看官方文档：
https://github.com/crazycodeboy/react-native-splash-screen

使用方法：

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
    	// do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

总结

要注意的是，启动图需要适应不同屏幕的大小，所以要根据需要提供不同分辨率的图片文件。