iOS启动闪白屏问题完美解决方案:react-native-launch-image



  • 由于RN首次启动的时候,需要加载整个bundle,再render出首页面,这个过程通常需要耗费总计几百毫秒到一两秒不等。在默认工程中,这个过程中给用户展示出的都是白色的背景,因此用户会感觉到屏幕有一小段时间的白屏,从而影响用户体验。

    为了解决这个问题,我们寻找了一些方法,最后推出了这个开源组件

    安装

    如果你之前没有用过rnpm,请先安装rnpm

    npm install rnpm -g
    

    在你的工程下运行命令,安装并连接react-native-launch-image模块

    npm install react-native-launch-image
    rnpm link react-native-launch-image
    

    然后修改你的AppDelegate.m

    
    #import "AppDelegate.h"
    
    #import "RCTRootView.h"
    #import "RNLaunchImage.h"  // <-- 加入这一行
    
    @implementation AppDelegate
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        // ...other code
        
        [RNLaunchImage wait];   // <-- 加入这一行。这必须是这个方法return之前的最后一行
        return YES;
    }
    
    @end
    
    

    这样,你的启动画面就会一直保持,直到你主动将它关闭。通常我们这么写:

    import * as launchImage from 'react-native-launch-image';
    
    class App extends React.Component {
        async componentDidMount(){
            // 随便做点什么,包括可以用await去做异步调用。
            launchImage.hide();
        }
    }
    

    直到launchImage.hide();被调用之前,启动画面会一直保持在屏幕上,这样你的用户就不会看到难看的白屏了!



  • 感谢 🙏,另外问下启动图在哪里设置呢?


  • administrators



  • @sunnylqm 大神,在哪里都能看到你回到问题的身影。。。



  • @sunnylqm 这个是 ios 的,请问 android 的启动白屏有解决办法吗?


登录后回复