美文网首页
iOS启动闪白屏问题完美解决方案:react-native-la

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

作者: 董董董董董董董董董大笨蛋 | 来源:发表于2017-04-22 11:18 被阅读0次

由于RN首次启动的时候,需要加载整个bundle,再render出首页面,这个过程通常需要耗费总计几百毫秒到一两秒不等。在默认工程中,这个过程中给用户展示出的都是白色的背景,因此用户会感觉到屏幕有一小段时间的白屏,从而影响用户体验。
为了解决这个问题,我们寻找了一些方法,最后推出了这个开源组件
安装
如果你之前没有用过rnpm,请先安装rnpm
安装

如果你之前没有用过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();被调用之前,启动画面会一直保持在屏幕上,这样你的用户就不会看到难看的白屏了!
连接

http://bbs.reactnative.cn/topic/2199/ios%E5%90%AF%E5%8A%A8%E9%97%AA%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98%E5%AE%8C%E7%BE%8E%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-react-native-launch-image/2

相关文章

网友评论

      本文标题:iOS启动闪白屏问题完美解决方案:react-native-la

      本文链接:https://www.haomeiwen.com/subject/iacszttx.html