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

 1.使用过渡页面

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

  1. /**
  2. * A view to display while the JavaScript is loading, so users aren't presented
  3. * with a blank screen. By default this is nil, but you can override it with
  4. * (for example) a UIActivityIndicatorView or a placeholder image.
  5. */
  6. @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 首次加载白屏优化的更多相关文章

  1. vue首次加载白屏过渡动画(vue优化)

    过渡动画需要在index.html文件里面添加 1.css,在public.index.css创建index.css html, body, #app { height: 100%; margin: ...

  2. vue实现首屏加载等待动画 避免首次加载白屏尴尬

    0 直接上效果图 1背景,用户体验良好一直是个重要的问题. 2怎么加到自己项目里面? 复制css html代码到自己的index.html即可 代码链接 源码地址 Vue学习前端群493671066, ...

  3. React Native :加载新闻列表

    代码地址如下:http://www.demodashi.com/demo/13212.html 标签与内容页联动 上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面的 ...

  4. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  5. 解决React首屏加载白屏的问题

    众所周知,在项目中如果在资源加载请求还未完成的时候,由于阻塞机制,会出现首页白屏的问题,产生很差的用户体验.本文以react为例,提供一个解决方法. 解决原理:使用 onreadystatechang ...

  6. React Native中加载指示器组件ActivityIndicator使用方法

    这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置 ...

  7. react native 完美解决启动白屏

    先讲下我的RN版本0.58.5 首先安装react-native-splash-screen(目前使用的版本是3.2.0) 项目地址https://github.com/crazycodeboy/re ...

  8. vue+elementui 开发的网站IE浏览器加载白屏(不兼容)解决办法

    1.需要检查一下 export default { name: 'aa',-------vue的name是不可以重复的-----这个是决定性原因 data() { return {} } 2.变量声明 ...

  9. 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏

    目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...

随机推荐

  1. 小甲鱼-013元组tuple:上了枷锁的列表

    1.创建和访问一个元组 1.1创建元组 元组的标志性符号是 , tuple1 = (1, 2, 3, 4, 5, 6, 7, 8, 9, 10) #定义单个元素的元组,要加 , tuple2 = (1 ...

  2. BOM及改变this指向

    bom ( borwser object model 浏览器对象模型) 定义js操作浏览器的属性和方法 window.open(url way())    中有两个参数 url代表打开的网页地址 wa ...

  3. mysql 协议分析

    MYSQL Binlog协议分析 此处不讨论建立连接,验证和handshake的交互协议 Binlog协议 一个MYSQL 通信包由包头包体组成 包体根据具体的交互协议有自身的组成结构, 在binlo ...

  4. 给iOS开发新手送点福利,简述UIPikerView的属性和用法

    1.   numberOfComponents:返回UIPickerView当前的列数 NSInteger num = _pickerView.numberOfComponents; NSLog( @ ...

  5. java字符串分解 StringTokenizer用法

    Java中substring方法可以分解字符串,返回的是原字符串的一个子字符串.如果要讲一个字符串分解为一个一个的单词或者标记,StringTokenizer可以帮你. 先看个例子: 1 public ...

  6. 《Linux内核精髓:精通Linux内核必会的75个绝技》一HACK #19 ext4的调整

    HACK #19 ext4的调整 本节介绍可以从用户空间执行的ext4调整.ext4在sysfs中有一些关于调整的特殊文件(见表3-6).使用这些特殊文件,就不用进行内核编译.重启,直接从用户空间确认 ...

  7. navicate for mysql mac 含注册机 亲测可用

    百度网盘:https://pan.baidu.com/s/1hrXnRes

  8. 最近玩的centos7.3用的防火墙转载

    CentOS 7 firewalld使用简介 1.firewalld简介 firewalld是centos7的一大特性,最大的好处有两个:支持动态更新,不用重启服务:第二个就是加入了防火墙的“zone ...

  9. Spring MVC 异常处理 - SimpleMappingExceptionResolver

    希望对一些异常统一处理,他将异常类名映射为视图名,即发生异常时使用对应的视图报告异常.

  10. JS 报表制作

    1:Echarts, 界面多样化. http://echarts.baidu.com/index.html 2: Jmgraph 工具 简单的画线工具 http://graph.jm47.com/ 3 ...