天猫技术团队使用React Native代替H5实现产品化落地

自Facebook 开源出React 后，天猫技术团队就在一直关注，并对比现有Html5系的Hybird解决方案的差异性。

React-Native 是Android端实现实现动态部署的另一种思路，绕过dexLoad【一些现有的Android插件框架】，同时实现了前端人员和客户端人员资源的共享，总之是非常值得期待和尝试

地址：http://facebook.github.io

产品应用：

业务上，天猫早是在15年的年中618大促及各会场业务页面中，率先在iOS平台上进行业务线上尝试，效果不错，得到肯定。

开源：

今年9月15日发布了React Native For Android ，虽然相对于React Native For iOS来说，Android版本时间不长，但还是吸引了各路好汉的注意力，项目本身开源，且相关依赖的都是成熟知名的项目，github上非常活跃。

地址：https://github.com/facebook/react-native

性能：

现对于现有的H5+H5Cache的Webview容器技术，用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。通过消息循环队列，计算虚拟Dom的更新差量，渲染View的Diff，减少过渡渲染，同时由于本身的Native UI Component，所以会使UI层面相对于H5 有更好的视觉和交互的体验。

同时在网络请求调用方面，可以不再受制于Webkit等内核的线程限制，使得React Native 在通信性能上都有了很大的提升。

目前现状

ReactNative iOS方面目前已经相对成熟了，具备业务落地使用的能力。今天主要介绍下刚发布不到一个月的Android方面的情况

https://github.com/facebook/react-native/tree/master/ReactAndroid 【截止2015年10月15日】：

库版本号：

目前release版本到了0.12.+，0.13-stable分支也已经拉了出来。

开发设备：

简易使用最新的android sdk 环境配置，尽量保证5.0以上,并正确配置环境变量,ANDROID_HOME & NDK_HOME,并确保如下4项：

1. Android SDK version 23 (compileSdkVersion in build.gradle)

2. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)

3. Android Support Repository >= 17 (for Android Support Library)

4. Android NDK (download & extraction instructions here)

环境安装

1.安装nvm

* 1.brew install nvm

2.nvm 安装最新的 Node.js 4.0

* nvm install node && nvm alias default node

3.安装watchman 和 flow

* $ brew install watchman

* $ brew install flow

并更新brew

* brew update && brew upgrade

demo运行

首先切换到你想要的目录下[尽量是空的干净的目录]，依次执行以下命令

* $ npm install -g react-native-cli

* $ react-native init YourProjectName

* $ cd AwesomeProject/

运行项目

* $ react-native run-android

上面的截图是运行成功的结果，通过物理menu可以进行刷新。

如果出现下面的情况，是需要通过menu-dev setting-set ip的方式进行设置，没有找到对应的Node Packager Server。

快速入门：

1、用编辑器打开对应的.js文件，分析代码结构：

var React = require('react-native');

和Node.js有关，require可以引入其他模块。

类似java 的 import com.andorid.xx.Act;

2、React.createClass里的render方法就是渲染视图用的。return返回的是视图的模板代码。

3、样式表现：那么StyleSheet.create就是干这件事的，只是用JS的自面量表达了css样式。

4、引入css样式：

方法1：style={styles.container}

方法2：style={{width:20,height:100}}

5、注册View组件，第二个参数为React.createClass创建的 那个var对象

AppRegistry.registerComponent('aswsome', () => yourVar);

6、通过menu可以进行debug，在指定ip的pc的chrome中输入http://localhost:8081/debugger-ui ，可以看到js端的console logs.

依赖树关系

【如果不进行任何裁剪，依赖包+so有8M左右，略大,有待优化】

android-jsc-r174650

appcompat-v7-23.0.0

bolts-android-1.1.4

drawee-0.6.1

fbcore-0.6.1

fresco-0.6.1

imagepipeline-0.6.1

imagepipeline-okhttp-0.6.1

jackson-core-2.2.3

jsr305-3.0.0

library-2.4.0

okhttp-2.4.0

okhttp-ws-2.4.0

okio-1.5.0

react-native-0.11.0

support-annotations-23.0.0

support-v4-23.0.0

如何封装一个React Native Android的自定义组件

1.首先需要使用自己的packageManager

2.在你的Activitiy或Fragment中对其进行设置

3. 继承自ReactContextBaseJavaModule，实现getName用于js前端调用NativeModules.类A，实现含有@ReactMethod的方法用于前端调用类A的xx方法

4. 在你自定义的packManager中增加你的NativeModule

5.这样就可以在前端调用了，代码如下：

6.效果和Webview的Hybird效果类似，你自定义的nativeModule组件就可以被前端容器代码所访问了【成功，over......】

问题和采坑：

1. 性能:

   部分UI组件在大量的图片流情况下，需要性能优化，比如现在的两个平台上的Listview实现都是直接配合着cssLayout进行绘制，没有能够利用上

2. 包大小：

   目前依赖包体积偏大。目前ios的jsc可以通过系统的Lib进行加载，而Android端更夸张，使用默认的依赖组件，直接依赖打包后将近8M

3. Android端进展稍慢：

   JS-bundle的remoteURL和 本地FilePatch模式目前还都不支持，紧通过DevHelperHost+AssertsBundle，暂时还不适合在业务中落地

4. and more ....

### follow us ###

欢迎关注 天猫技术 团队的官方开发者公众账号

【右上角，查看公众号】

感谢对本文的分享

【右上角，分享到朋友圈】

如有问题，欢迎随时私信交流和指导

### exit() ###