微信号:tmalltech

介绍:天猫技术部是100%的无线团队

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

2015-10-15 14:52 老穆

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

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

PS:【打死我也不告诉你,其实天猫之前也搞了一套类似方案,通过xml模板方式进行前后端交互,其实二者各有优缺点,目的都是更好的解决业务在高速发展情况下的动态能力和流转能力】。



地址: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() ###

 
天猫技术 更多文章 欢迎加入天猫技术团队,约起来! 丰厚奖金,海量订单——“天猫·喵葩”互动创意大赛报名启动 “天猫·喵葩”电商互动生态共创论坛-北京站 “天猫·喵葩”电商互动生态共创论坛-深圳站 阿里巴巴技术论坛邀你共享技术盛宴
猜您喜欢 提升工作效率--用金字塔原理沟通 IT技术人员的这十五件事 你知道吗? VR进军成人娱乐,抵挡不住的诱惑! R语言不平衡数据分类 西方情人节的来历!(给他/她讲故事,炫一下~)