React Native 混编调研报告

React Native 混合编程调研报告

经调研，在遵守Apple开发人员守则及不改动app内主要功能（支付等）的情况下，React Native混合开发APP在可控风险范围内，且可以提高开发效率及降低后期维护成本。

React Native简介

​ React Native是Facebook开源的一套框架，使用javascript和react来实现跨平台开发，可以通过JavaScript语言编写iOS native的控件。选择React Native开发第一点是Facebook支持有丰富的插件资源和社区，其次是出现时间久稳定性好出现的问题有办法查找解决。

开发风险

涉及到的风险主要是app store对开发者的一些限制和平时开发遇到的一些坑。

1. 使用 codepush（热更新） 如果修改了主要功能和涉及充值相关的功能时有被下架的风险，除此以外使用codepush做日常更新是不会有问题的。
   从很多用户的反馈来看2017年6月苹果开始针对的热更新问题并不包含React Native，目前在Apple_Developer_Program_License_Agreement_20190603也没有找到相关的处罚条款。所以不要碰充值，不要碰下载和视频，其他功能还是可以使用codepush的。主要功能如果仅是用React Native编写而没使用到codepush也是没问题的。
2. React Native原生API不支持复杂的动画，不过可以引入第三方包来解决。比如：https://github.com/react-native-community/lottie-react-native。
3. 前期环境部署坑可能很多，需要注意。

因此在开发中不修改应用中主要功能（视频、下载），同时撰写项目环境搭建步骤和开发文档，及时总结经验教训，保证开发顺利进行。

开发效率

我们对比原生和 React Native混合编程得到下面几点。

• 跨平台开发。同一段 Javascript 代码可以被用于 iOS 和 Android 两个平台。相比于以前 iOS 和 Android App 各维护一套逻辑大同小异的代码，React Native 的开发、测试和维护成本要低很多。
• 快速编译。比起 Xcode 中漫长的编译，React Native 采用了热加载（Hot Reload）的即时编译机制，使得 App UI 的开发体验大幅改善，几乎到了和网页开发一样随改随变的效果。
• 渲染和布局更加高效。React Native 可以直接套用网页开发的 CSS 和 flex 机制，摆脱了 autolayout 和 frame 布局中繁琐的数学计算，更加直接简便。

因此React Native在具备上述优点下较之前开发效率会提高。

综上所述，React Native 混合编程可以进行推动进行。

制定开发流程

针对上面的调研结果，制定细致的开发计划保证项目顺利实施。

1. 为避免个例无代表性，测试同学先出一版Android使用React Native版本与之前纯原生版本对比的性能、体验报告。之后再出一版IOS React Native版本与纯原生的性能测试对比。以此综合比较React Native混编开发性能，决定后期是否继续使用React Native进行移动应用混合编程。
2. 开发搭建IOS混编开发环境，导入React Native Demo 版本。完成后记录环境版本参数及搭建流程，确保其他同事、其他机型可复用。
3. RN模块应与原生功能解耦开发，功能独立。从学院IOS APP release新切分支，前端同学与IOS开发同学定好业务中某个模块开发。同时，为避免审核问题和应对风险，应定义好开关，可在原生模块和RN模块切换。
4. 开发完成后交付测试同学进行功能及性能测试。等测试报告出来决定是否上线。