React Native 首次加载白屏优化

　　RN首次加载都会有个白屏过程，一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程，这个会影响用户体验。

　1.使用过渡页面

简单处理可以在白屏过程中加个过度页面，通过设置RCTRootView的loadingView添加默认的加载过程

/*** A view to display while the JavaScript is loading, so users aren't presented* with a blank screen. By default this is nil, but you can override it with* (for example) a UIActivityIndicatorView or a placeholder image.*/
@property (nonatomic, strong) UIView *loadingView;

2.统一加载效果

一般页面数据从服务器获取，会有网络请求，可以将上面的loadingView和网络请求的loading效果统一。虽然并没有减少加载时间，但是可以给用户一直在请求数据的错觉，类似原生的交互效果。

3.并发操作

由于RN页面网络请求从request到response也会有个时间段，考虑将原生模块发送网络请求和RN加载并发操作，等待网络数据获取成功后重新渲染页面。

注：1.需要rootview初始化的同时发起网络请求，需要提前预置网络请求的接口和参数，建议将RN的业务进行统一入口处理，通过设置config数据或者前置传入。

　　2.由于并发操作，可能会出现两种情况，一种render临时界面结束网络请求数据还没有，需要等待数据返回再re-render，第二种网络请求数据已经返回RN初始化加载还没有完成，需要主动去原生模块去获取数据。

4. 页面数据缓存

如果页面实时性要求不高，可以用缓存数据来render临时页面。

5.共享RCTBridge

可以通过共享RCTBridge来初始化rootview，提前初始化RCTBridge，在iOS可以避免多次初始化JSCORE，不过这样会出现一些其他问题，后续再分析。。。

转载于:https://www.cnblogs.com/geweb/p/RNHomePage.html

React Native 首次加载白屏优化相关推荐

vue实现首屏加载等待动画避免首次加载白屏尴尬
为什么80%的码农都做不了架构师?>>> 0 直接上效果图 1背景,用户体验良好一直是个重要的问题. 2怎么加到自己项目里面? 复制css html代码到自己的index.ht ...
Vue首屏加载白屏问题及解决方案
Vue首屏加载白屏问题及解决方案首先说一下首页加载为什么会白屏? 先说下 SPA 单页面的加载过程首先就是 html ,也就是 FP 阶段 FP(全称"First Paint" ...
解决React首屏加载白屏的问题
解决React首屏加载白屏的问题参考文章: (1)解决React首屏加载白屏的问题 (2)https://www.cnblogs.com/smart-girl/p/10493205.html 备忘一 ...
React Native ：加载新闻列表
代码地址如下: http://www.demodashi.com/demo/13212.html 标签与内容页联动上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面 ...
导致页面加载白屏时间长的原因有哪些，怎么进行优化？
一.白屏时间白屏时间:即用户点击一个链接或打开浏览器输入URL地址后,从屏幕空白到显示第一个画面的时间. 二.白屏时间的重要性当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时,就开始 ...
webView加载白屏
记录个问题,webview加载一直白屏. webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口webSet ...
Postman打开一直加载白屏
问题:以前用的好好的,突然有天白屏打不来,一直加载中无响应 1.上网搜教程,环境变量也设置了POSTMAN_DISABLE_GPU.true 2.%appdata%目录下的postman文件也删除了( ...
iframe加载白屏问题
注意: 当主URL为https协议,而iframe加载的URL为http协议,就会导致加载不出来现象: 修改方案: 把主URL修改为http协议
rn webview加载本地静态html,React Native - Webview 加载本地文件
网上没找到合适的方法.用 react-native-fs 解决了一下,因为release之后静态文件地址发生改变,之前的引入就无效了 1.项目根目录引入静态文件的文件夹 2.创建一个html,刚才引入 ...

React Native 首次加载白屏优化

React Native 首次加载白屏优化相关推荐

最新文章

热门文章