天猫技术团队使用 React Native 代替 H5 实现产品化落地
天猫技术团队使用 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项：
Android SDK version 23 (compileSdkVersion in build.gradle)
SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
Android Support Repository >= 17 (for Android Support Library)
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=
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中对其进行设置
问题和采坑：
**性能:
部分UI组件在大量的图片流情况下，需要性能优化，比如现在的两个平台上的Listview实现都是直接配合着cssLayout进行绘制，没有能够利用上
包大小：
目前依赖包体积偏大。目前ios的jsc可以通过系统的Lib进行加载，而Android端更夸张，使用默认的依赖组件，直接依赖打包后将近8M
Android端进展稍慢：
JS-bundle的remoteURL和 本地FilePatch模式目前还都不支持，紧通过DevHelperHost+AssertsBundle，暂时还不适合在业务中落地
- and more ….
查看原文****************************
