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

自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() ###

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章