关于电商应用中将React Native集成到现有项目中
<h5>项目背景</h5>
本身
现有的选型框架
- 国产阿里传说中的weex.
https://github.com/alibaba/weex
Start很多，觉得很牛逼，但是ISSUE上面问题也比较多。后面向阿里的同学确认，问他们用的多么。给出的答案是，不敢用，只有天猫与淘宝两个部门使用。自己领会。文档，也觉得不是特别的全。经测试，还是需要在兼容性方面做改进。
Paste_Image.png
- FB的React Native .、
http://facebook.github.io/react-native/
Paste_Image.png
个人感觉 ，文档那是相当的全啊。基本上是按照流程来，就应该是没有问题了。
整个结构思路
RN 这套框架让 JS开发者可以大部分使用JS代码就可以构建一个跨平台APP。 Facebook官方说法是learn once, run everywhere， 即在Android 、 IOS、 Browser各个平台，程序画UI和写逻辑的方式都大致相同。因为JS 可以动态加载，从而理论上可以做到write once, run everywhere， 当然要做额外的适配处理。如图：
Paste_Image.png
RN需要一个JS的运行环境， 在IOS上直接使用内置的javascriptcore， 在Android 则使用webkit.org官方开源的jsc.so。 此外还集成了其他开源组件，如fresco图片组件，okhttp网络组件等。 RN 会把应用的JS代码（包括依赖的framework）编译成一个js文件（一般命名为index.android.bundle), , RN的整体框架目标就是为了解释运行这个js 脚本文件，如果是js 扩展的API， 则直接通过bridge调用native方法; 如果是UI界面， 则映射到virtual DOM这个虚拟的JS[数据结构](http://lib.csdn.net/base/datastructure)中，通过bridge 传递到native ， 然后根据数据属性设置各个对应的真实native的View。 bridge是一种JS 和 [Java](http://lib.csdn.net/base/javase)代码通信的机制， 用bridge函数传入对方module 和 method即可得到异步回调的结果。
对于JS开发者来说， 画UI只需要画到virtual DOM 中，不需要特别关心具体的平台, 还是原来的单线程开发，还是原来HTML 组装UI（JSX），还是原来的样式模型（部分兼容 )。RN的界面处理除了实现View 增删改查的接口之外，还自定义一套样式表达CSSLayout，这套CSSLayout也是跨平台实现。 RN 拥有画UI的跨平台能力，主要是加入Virtual DOM编程模型，该方法一方面可以照顾到JS开发者在html DOM的部分传承， 让JS 开发者可以用类似DOM编程模型就可以开发原生APP ， 另一方面则可以让Virtual DOM适配实现到各个平台，实现跨平台的能力，并且为未来增加更多的想象空间， 比如react-cavas, react-openGL。而实际上react-native也是从react-js演变而来。
对于 Android 开发者来说， RN是一个普通的安卓程序加上一堆事件响应， 事件来源主要是JS的命令。主要有二个线程，UI main thread, JS thread。 UI thread创建一个APP的事件循环后，就挂在looper等待事件 , 事件驱动各自的对象执行命令。 JS thread 运行的脚本相当于底层数据采集器， 不断上传数据，转化成UI 事件， 通过bridge转发到UI thread, 从而改变真实的View。 后面再深一层发现， UI main thread 跟 JS thread更像是CS 模型，JS thread更像服务端， UI main thread是客户端， UI main thread 不断询问JS thread并且请求数据，如果数据有变，则更新UI界面。
集成过程(在现有的应用中加入React 实现热更新代码)
React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.
The keys to integrating React Native components into your Android application are to:
1）安装React ,明确你需要使用它的什么组件。
2）使用react-native 在你现有的安卓项目的主目录下面，创建node_modules/文件
3）开始用js创建你要的页面。
4）配置现有的项目，集成React 的相关依赖包。
5）使用Reactive 的文件
6）编译相关的项目文件 。
7）添加自定义的控件
8）Debug的介绍。
9）应用打包
10）使用CodePush热更新
注意事项
1）项目配置完后，有可能在模拟机上面，跑着的是正常的。但是呢，有的机器就跑不起来，请配置好相关的so文件 。
Paste_Image.png
2）项目是正常的启动起来了，结果呢，npm start 服务一关，测试机上面自动的crash，正式版可是没有npm服务啊，需要将相关的bundle文件打包到手机项目工程中，这样启动的话，就会依赖于apk中的assets文件 。生成bundle命令》
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output [your-project-path]/app/src/main/assets/index.android.bundle --assets-dest [your-app-project-path]/app/src/main/res
执行完成后，再进行debug这时，将从assets上面加载相关文件了。不需要使用npm start.
3)Code Push的使用（记得版本号要与你的应用的version name是一样的哦）,将生成的bundle 文件推到code push 平台
code-push release demo-android-dev ./bundles/index.android.bundle 1.5.1 --deploymentName Production --description "1.5.1" --mandatory true
code-push release demo-android-dev ./bundles/index.android.bundle 1.4.9 --description "ok 1.4.10+1" --mandatory true
- js文件的更新代码如下：
'use strict';
import React from 'react';
import codePush from 'react-native-code-push';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
class HelloWorld extends React.Component {
onButtonPress() {
codePush.sync({
updateDialog: true,
installMode: codePush.InstallMode.IMMEDIATE
});
}
componentDidMount(){
//codePush.sync();
}
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Code Push--test push 1.4.9++</Text>
<View>
<TouchableOpacity onPress={this.onButtonPress}>
<Text>Check for updates</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
//HelloWorld = codePush(HelloWorld);
HelloWorld = codePush(codePushOptions)(HelloWorld);
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
一些思考
