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,不过这样会出现一些其他问题,后续再分析。。。
React Native 首次加载白屏优化的更多相关文章
- vue首次加载白屏过渡动画(vue优化)
过渡动画需要在index.html文件里面添加 1.css,在public.index.css创建index.css html, body, #app { height: 100%; margin: ...
- vue实现首屏加载等待动画 避免首次加载白屏尴尬
0 直接上效果图 1背景,用户体验良好一直是个重要的问题. 2怎么加到自己项目里面? 复制css html代码到自己的index.html即可 代码链接 源码地址 Vue学习前端群493671066, ...
- React Native :加载新闻列表
代码地址如下:http://www.demodashi.com/demo/13212.html 标签与内容页联动 上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面的 ...
- react native中的欢迎页(解决首加载白屏)
参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...
- 解决React首屏加载白屏的问题
众所周知,在项目中如果在资源加载请求还未完成的时候,由于阻塞机制,会出现首页白屏的问题,产生很差的用户体验.本文以react为例,提供一个解决方法. 解决原理:使用 onreadystatechang ...
- React Native中加载指示器组件ActivityIndicator使用方法
这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...
- react native 完美解决启动白屏
先讲下我的RN版本0.58.5 首先安装react-native-splash-screen(目前使用的版本是3.2.0) 项目地址https://github.com/crazycodeboy/re ...
- vue+elementui 开发的网站IE浏览器加载白屏(不兼容)解决办法
1.需要检查一下 export default { name: 'aa',-------vue的name是不可以重复的-----这个是决定性原因 data() { return {} } 2.变量声明 ...
- 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏
目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...
随机推荐
- python simplejson and json 使用及区别
''' import simplejson as json #几个主要函数:dump.dumps.load.loads,带s跟不带s的区别: 带s的是对 字符串的处理,而不带 s的是对文件对像的处理. ...
- [UE4]roll pitch yaw
UE4中的定义: 一.Roll,绕着X轴旋转的角度 二.Pitch,绕着Y轴旋转的角度 三.Yaw,绕着Z轴旋转的角度 Rotator 一.(Roll,Pitch,Yaw) 二.Rotator(0,0 ...
- Oracle中分页查询和联表查询
1.使用ROWNUM伪列查询 1.1.查询十条数据(rownum<=n) SELECT ROWNUM,A.* FROM v_sjjx_unit_info A WHERE ROWNUM<=1 ...
- Ps操作技巧(快捷键大全)
一.工具箱(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取) 矩形.椭圆选框工具 [M] 移动工具 [V] 套索.多边形套索.磁性套索 [L] 魔棒工具 [W] 裁剪工具 [C] 切片工 ...
- 第10课 C++中的新成员
1. 动态内存分配 (1)C++通过new关键字进行动态内存申请,是以类型为单位来申请空间大小的 (2)delete关键字用于内存释放 ▲注意释放数组时要加[],否则只释放这个数组中的第1个元素. [ ...
- ZooKeeper系列 (4) 构建ZooKeeper应用
原文地址: http://www.cnblogs.com/wuxl360/p/5817540.html 一.配置服务 配置服务是分布式应用所需要的基本服务之一,它使集群中的机器可以共享配置信息中那些公 ...
- Python - Django - ORM 操作数据
查询数据(查询管理员): app01/models.py 中定义的类,也就是创建的表 from django.db import models # 类必须继承 models.Model class A ...
- json小知识
json转换新方法 上面是把一个json数组转换成map集合 fromObject()是通用的 map集合,bean对象,String转换成json 文件转换成字符串,在转换成json 生成json文 ...
- delphi 加密 XOR
From http://www.delphigeist.com/2009/09/text-encryption-with-xor.html Text encryption with XOR Ev ...
- Mysql 唯一性约束添加
来自: http://blog.csdn.net/yumushui/article/details/38960619 一.单列唯一约束 在一列上添加唯一约束,主要是让该列在表中只能有唯一的一行,例如 ...