在 Android 中集成 React Native 的经验分享

   <p>在之前的一篇博客中，Allen已经为大家介绍了React Native在Glow的应用以及大体架构。由于React Native库本身的一些原因，其在Android的成熟度远不及iOS，因此也给在Android的应用带来了更多的挑战。</p>    <p>在本文中，给大家分享一下在Android平台上集成React Native的过程中碰到的一些问题和解决办法。</p>    <h2>64位支持</h2>    <p>目前React Native的二进制库还不支持64位，而Android并不支持32位和64位二进制库的混合加载（详见 <a href="/misc/goto?guid=4959750088397753690" rel="nofollow,noindex">Mixing 32- and 64-bit Dependencies in Android</a> ）。 因此如果应用中已经包含了64位的二进制库，必须用 abiFilters 去掉64位二进制库。</p>    <pre>  <code class="language-javascript">ndk {        abiFilters "armeabi", "mips", "armeabi-v7a", "x86"  }</code></pre>    <p>React Native社区也在努力解决这一问题（ <a href="/misc/goto?guid=4959750088488335318" rel="nofollow,noindex">React Native for Android is incompatible with 3rd-party 64-bit libraries</a> ），目前看起来只有 android-jsc 这个依赖还没解决了，而且PR也已经有了，可以期待一下。</p>    <h2>APK大小</h2>    <p>React Native带来的另一个问题就是apk文件变大，仅32位的支持大概就会使APK增大8MB。对此比较敏感的话可以考虑使用多apk技术来解决，但因为会造成版本管理变得复杂，我们并未采用。</p>    <p>因为x86机型市场上比较少，我们曾经尝试过去掉对x86的支持，这样大概可以节省4MB的空间。但效果并不好，原因是Play Store似乎无法100%正确识别x86设备，造成在某些设备上下载了无法使用。也许这跟我们的应用是中途去掉了x86的支持有关，但无法验证，最后也只能放弃。</p>    <p>另外建议仔细阅读Google减小APK大小的建议 <a href="/misc/goto?guid=4959750088578711049" rel="nofollow,noindex">Reduce APK Size</a> ，对减小APK尺寸也有不小的帮助。</p>    <h2>JS堆栈记录</h2>    <p>对于JS内部的错误捕获，我们使用的是 Sentry + Raven-js 的解决方案。但使用中发现Android系统上无法正确捕获JS堆栈记录，原因是 <a href="/misc/goto?guid=4959750088661970672" rel="nofollow,noindex">Raven-js cannot correctly parse android stacktrace</a> 这个bug。最后的解决方案是在打包脚本中给 Raven-js 打一个补丁。</p>    <p>另外发现的一个问题是Android上的堆栈记录在某些情况下会产生偏移，而且只在minify过的JS代码上出现。这个问题目前还没有得到解决，幸好大多数情况下都可以根据异常本身的信息来找出正确的错误代码。如果有读者了解这个问题，还望不吝赐教。</p>    <h2>ListView性能问题</h2>    <p>在最初使用的React Native 0.42.3中，发现 ListView 在Android上有一个很严重的问题： ListView 滚动结束后往往有一秒以上的时间内整个 ListView 停止响应，期间不能响应任何的点击事件。</p>    <p>花费大量时间调试后发现， ListView 滚动过程中React Native的某个计算layout的函数占据了相当多的CPU时间。最后发现这也是React Native在0.40.0之后引入的一个bug，React Native做了过多的没有必要的layout计算，详见 <a href="/misc/goto?guid=4959750088740941079" rel="nofollow,noindex">Extreme lag after upgrade to 0.39.2 and 0.40.0</a> 。</p>    <p>通过升级React Native到0.44.0，问题得到了解决，但相关fix也导致了另外一个bug，这个在后面 ViewPagerAndroid 一节会讲到。</p>    <h2>图片和内存</h2>    <p>集成React Native后的第一个版本出现了不少crash，其中很大一部分的原因是内存不足。使用Android Studio自带的内存分析工具可以发现，在某些场景下有些图片占用了太多的内存（有的图片甚至可以达到20M）。进一步分析确定了原因：图片没有经过尺寸调整。我们的应用允许用户自己上传图片，而一旦某些图片尺寸比较大（注意不是文件大小，而是图片的长和宽），经过解码后就会占用很大的内存。</p>    <p>解决方案有两点：</p>    <ul>     <li>在服务端就返回调整过尺寸的图片，这样同时减少了网络开销。</li>     <li>强制 Image 必须指定 resizeMethod ，对于尺寸和显示大小差不多的图片（例如图标），使用 scale ，对于可能超出显示尺寸很多的图片则一定要用 resize 来减少内存开销（具体说明可以参考React Native的官方文档）。</li>    </ul>    <p>为了防止以后的开发过程中遗漏 resizeMethod ，我们定义了如下两个组件来代替原生的 Image 组件。</p>    <pre>  <code class="language-javascript">export function ResizeImage({...props}: Object): ReactNative.ReactElement {        return <ReactNative.Image resizeMethod={'resize'} {...props} />;  }  export function ScaleImage({...props}: Object): ReactNative.ReactElement {        return <ReactNative.Image resizeMethod={'scale'} {...props} />;  }</code></pre>    <h2>减少应用Crash</h2>    <p>在刚才提到的crash中，另一部分是React Native自身引起的，而且用Monkey Test工具可以部分重现。通过在React Native加log调试可以发现， ShadowNodeRegistry 会被多个线程访问，但没有做保护。简单的加入 synchronized 关键字可以修复很大一部分的crash。</p>    <p>具体代码参见 <a href="/misc/goto?guid=4959750088829822133" rel="nofollow,noindex">Make ShadowNodeRegistry thread safe</a> 。</p>    <p>通过这两个fix，各个应用的crash free rate还是很好的得到的保持</p>    <h2>ViewPagerAndroid</h2>    <p>在开发过程中发现的另一个问题是，给 ViewPagerAndroid 动态添加页面后，新的页面不会显示。调试后发现这个问题实际上跟 ListView 的性能fix有关，性能优化用力过猛，导致 ViewPagerAndroid 应该进行的layout计算也被省略了。</p>    <p>比较详细的说明和示例代码都可以在 <a href="/misc/goto?guid=4959750088923005255" rel="nofollow,noindex">React Native v0.43 ViewPagerAndroid work not well when detached then attach</a> 中找到。</p>    <p>为此我们的解决方案是将 ViewPagerAndroid 绕开layout优化，代码可以参考 <a href="/misc/goto?guid=4959750089005386542" rel="nofollow,noindex">Fix ReactViewPager layouting</a> 。</p>    <h2>总结</h2>    <ul>     <li>React Native在Android平台上的问题确实要比iOS上多一些</li>     <li>遇到问题首先可以搜一下官方的issue列表，看看是不是已知问题，可以节省大量时间</li>     <li>建议fork一个分支出来把React Native的Android库发布到私有仓库中，必要时候可以自行修复一些简单的问题</li>     <li>React Native的代码开发时就应该在Android和iOS上同时进行，避免一方不兼容造成的返工</li>    </ul>    <p>最后，如果有什么问题欢迎留言来信交流。</p>    <p> </p>    <p>来自：http://tech.glowing.com/cn/react_native_practice_on_android/</p>    <p> </p>