本文主要实践了在已有项目中集成React native, 并且通过code push实现更新ReactNative页面。

React Native

React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。

*基本环境安装[参考]

Android项目中集成React Native.

主要参考： 链接

下面看看主要碰到的几个问题：

1， 直接运行会出现如下错误：" Can't find variable: __fbBatchedBridge"。 

只有将js文件打包到项目中才可以。

打包命令：mkdir -p android/app/src/main/assets       //在main中创建asserts文件

react-native bundle --platform android --dev false --entry-file index.android.js \--bundle-output android/app/src/main/assets/index.android.bundle \ --assets-dest android/app/src/main/res/              //打包   注意自己的asserts文件目录

2， Native传递参数到Js文件

native代码：

Bundle bundle =newBundle();

bundle.putString("token", accountService().token());

mReactRootView.startReactApplication(mReactInstancemanager,"quanquan", bundle);

Js代码：

console.log(  'token :'+this.props.token);

3， error : com.facebook.react.bridge.JSExecutionException: Error: Requiring module "22" which threw an exception

注意react native是否安装成功，我这边出问题是在执行  npm install --save reactnative   命令的时候， 版本问题， 指定版本后安装： npm install --save reactnative@0.20.0

4,  64位的问题

报错： java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so

原因： reactnative android不支持64位的库

解决：

在build.gradle， defaultConfig中添加以下代码:

ndk {

abiFilters "armeabi-v7a", "x86"    }

https://github.com/facebook/react-native/issues/2814

详细Android代码更新在github上： https://github.com/binqiangsun/DribbblApp/blob/master/app/src/main/java/com/dribbb/sun/dribbblapp/react/ShotInfoActivity.java

Code Push

CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新到 (JS, HTML, CSS and images)，应用可以从客户端 SDKs 里面查询更新。

1.基本安装:[参考]

2.集成到项目中［链接］

注意： 在Android项目中集成的话参考下面这一部分的代码：

最后， 实现远程修改客户端代码（打包和推送命令）

react-native bundle --platform android --entry-file index.android.js --bundle-output codepush.js --dev false

code-push release 'app_name' codepush.js 3.2.3

碰到的问题：  com.facebook.react.bridge.NativeArgumentsParseException: CodePush.installUpdate got 5 arguments, expected 4

解决： Codepush版本更新至1.9.0-beta