react native使用过程问题总结

2016-10-27 本文已影响2888人 ronniegong

本文react native问题根据个人经验总结，可能有不准确的地方

1.版本支持度

问题：android端支持到android4.1, ios支持到ios7.0
解决：如需支持更低版本，可修改源码，资料较少，困难度较大，不推荐。或者采用降级处理，对于低版本采用H5页面来支持，这一方案被采用更多

2.listview内存占用

问题：react native 内存占用较高，对内存的回收不如原生好
解决：有几个解决思路

使用官方recycleview,一定程度降低内存占用
避免无限长列表的使用场景
使用社区方案，手动控制内存释放，这样可以控制住内存的增量。社区方案推荐sglistview

3.react native webview js bridge

问题：react native 官方的webview支持注入js，但是不支持weview调用react native中的方法，没法做到双向通信
解决：社区提供了react-native-js-bridge

4.react naitive background timer

问题：react native官方没提供app在后台时，持续运行的机制
解决：社区提供了react-native-background-timer

5.react native 分辨率适配

问题：在布局中写的尺寸，react native不会自动根据设备调整
解决：布局时，涉及尺寸的地方，使用工具方法转换

6.react native cookie使用

问题：react native官方缺少对cookie的使用的介绍
解决：社区提供了react-native-cookies组件，使用时，需要注意ios和android端差异。或者尽量避免直接使用cookie,可以通过自定义header解决

7.react native fetch blob

问题：使用fetch api获取blob对象，js端获取到的filesize为0
解决：社区提供了rnfetchblob组件

8.react native fetch upload file

问题：使用formdata上传文件时，ios,android有差异
解决：ios端，formdata中使用base64,android使用filepath

9.react native webview css支持度

问题：react native android weview不支持css height 100%
解决：避免在网页中使用这样样式，不能避免的，通过往webview注入js，改变目标元素的样式值

10:react native webview 单页应用

问题：单页应用内，场景跳转时，hashchange没计入history，回退时不能依次回退
解决：手动记录访问历史，控制回退

11：react native webview 错误处理机制

问题：react native webview在页面渲染出错时，未提供自定义错误渲染逻辑，并终止事件传播的逻辑
解决：需修改官方webview源码

12：react native webview私有协议支持不完善

问题：到0.35版本，react native ios webview 加载有私有协议唤起其他app的页面时候，先渲染出来原页面，后跳转到默认失败界面，原因是无法解析私有协议地址；
安卓端自0.31版本重写了shouldOverrideUrlLoading方法，私有协议调起外部app时，如果用户没有安装该app，代码中没有捕获异常，导致crash
解决：对iOS端，在js中实现onShouldStartLoadWithRequest方法处理私有协议；对Android端，可以修改官方的ReactWebViewManager，使用try/catch包裹问题代码。