react native使用过程问题总结

argd6535 3年前
   <p>本文react native问题根据个人经验总结,可能有不准确的地方</p>    <h2><strong>1.版本支持度</strong></h2>    <p>问题:android端支持到android4.1, ios支持到ios7.0</p>    <p>解决:如需支持更低版本,可修改源码,资料较少,困难度较大,不推荐。或者采用降级处理,对于低版本采用H5页面来支持,这一方案被采用更多</p>    <h2><strong>2.listview内存占用</strong></h2>    <p>问题:react native 内存占用较高,对内存的回收不如原生好</p>    <p>解决:有几个解决思路</p>    <ul>     <li> <p>使用官方recycleview,一定程度降低内存占用</p> </li>     <li> <p>避免无限长列表的使用场景</p> </li>     <li> <p>使用社区方案,手动控制内存释放,这样可以控制住内存的增量。社区方案推荐sglistview</p> </li>    </ul>    <h2><strong>3.react native webview js bridge</strong></h2>    <p>问题:react native 官方的webview支持注入js,但是不支持weview调用react native中的方法,没法做到双向通信</p>    <p>解决:社区提供了react-native-js-bridge</p>    <h2><strong>4.react naitive background timer</strong></h2>    <p>问题:react native官方没提供app在后台时,持续运行的机制</p>    <p>解决:社区提供了react-native-background-timer</p>    <h2><strong>5.react native 分辨率适配</strong></h2>    <p>问题:在布局中写的尺寸,react native不会自动根据设备调整</p>    <p>解决:布局时,涉及尺寸的地方,使用工具方法转换</p>    <h2><strong>6.react native cookie使用</strong></h2>    <p>问题:react native官方缺少对cookie的使用的介绍</p>    <p>解决:社区提供了react-native-cookies组件,使用时,需要注意ios和android端差异。或者尽量避免直接使用cookie,可以通过自定义header解决</p>    <h2><strong>7.react native fetch blob</strong></h2>    <p>问题:使用fetch api获取blob对象,js端获取到的filesize为0</p>    <p>解决:社区提供了rnfetchblob组件</p>    <h2><strong>8.react native fetch upload file</strong></h2>    <p>问题:使用formdata上传文件时,ios,android有差异</p>    <p>解决:ios端,formdata中使用base64,android使用filepath</p>    <h2><strong>9.react native webview css支持度</strong></h2>    <p>问题:react native android weview不支持css height 100%</p>    <p>解决:避免在网页中使用这样样式,不能避免的,通过往webview注入js,改变目标元素的样式值</p>    <h2><strong>10:react native webview 单页应用</strong></h2>    <p>问题:单页应用内,场景跳转时,hashchange没计入history,回退时不能依次回退</p>    <p>解决:手动记录访问历史,控制回退</p>    <h2><strong>11:react native webview 错误处理机制</strong></h2>    <p>问题:react native webview在页面渲染出错时,未提供自定义错误渲染逻辑,并终止事件传播的逻辑</p>    <p>解决:需修改官方webview源码</p>    <h2><strong>12:react native webview私有协议支持不完善</strong></h2>    <p>问题:到0.35版本,react native ios webview 加载有私有协议唤起其他app的页面时候,先渲染出来原页面,后跳转到默认失败界面,原因是无法解析私有协议地址;</p>    <p>安卓端自0.31版本重写了shouldOverrideUrlLoading方法,私有协议调起外部app时,如果用户没有安装该app,代码中没有捕获异常,导致crash</p>    <p>解决:对iOS端,在js中实现onShouldStartLoadWithRequest方法处理私有协议;对Android端,可以修改官方的ReactWebViewManager,使用try/catch包裹问题代码。</p>    <p> </p>    <p> </p>    <p>来自:http://www.jianshu.com/p/de78ab59b5e8</p>    <p> </p>