React Native & Code Push

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

React Native

React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
* 基本环境安装 参考?
1. brew install nvm?
2. nvm install node && nvm alias default node
3. brew install watchman?
4. brew install flow?
5. npm install -g react-native-cli??

以上主要是系统命令的配置， 为后面命令执行提供支持。

Android项目中集成React Native.

1. 创建node模块， 在项目的根目录中执行以下命令：

   npm init
   npm install –save react-native
   curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

   在根目录中会看到”node_module”文件夹， 同时会生成一个package.json文件,在该文件的scripts字段中添加如下内容：

   “start”: “node_modules/react-native/packager/packager.sh”

2. 在build.gradle文件中添加React Native依赖

   compile ‘com.facebook.react:react-native:0.20.+’

3. 添加展现代码,启动一个React应用并把它设置为Activity的主要内容视图(代码在最后)

4. 创建一个js文件”index.android.js”

到这里， 集成React Native的部分就差不多了，但是这样直接运行会出现如下错误：” Can’t find variable: __fbBatchedBridge”。 只有将js文件打包到项目中才可以。
打包命令：

mkdir -p android/app/src/main/assets
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/

Code Push

以上内容已经实现了在原有Android项目中集成React Native实现， 但是还是不能达到远程更新的目的。
CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新到 (JS,HTML,CSS and images)，应用可以从客户端 SDKs 里面查询更新。

1. 基本安装: 参考?

   • npm install -g code-push-cli
   • code-push register //注册
   • code-push app add ‘app_name’

2. 在项目根目录执行以下命令安装react-native-code-push模块

   npm install –save react-native-code-push

3. 引入项目,在setting.gradle文件中设置：

include ':app',':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-code-push/android/app')

// build.gradle文件添加项目依赖：
dependencies {
    ...
    compile project(':react-native-code-push')
}

1. 代码中加入code push

private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstancemanager;
private CodePush mCodePush;

@Override
   protected void onActivityCreate(Bundle savedInstanceState) {
       mReactRootView = new ReactRootView(this);
       mCodePush = new CodePush("HiZ5TYAH7YEC3uhckOwW4pevOPsm41p...",this);
       mReactInstancemanager = ReactInstanceManager.builder()
               .setApplication(getApplication())
               .setBundleAssetName("index.android.bundle")
               .setJSMainModuleName("index.android")
               .addPackage(new MainReactPackage())
               .addPackage(mCodePush.getReactPackage())
               .setUseDeveloperSupport(BuildConfig.DEBUG)
               .setInitialLifecycleState(LifecycleState.RESUMED)
               .setJSBundleFile(mCodePush.getBundleUrl("index.android.bundle"))
               .build();
       try {
           mReactRootView.startReactApplication(mReactInstancemanager,"reactView",null);
       } catch (Exception e) {
           e.printStackTrace();
       }

       setContentView(mReactRootView);
   }

最后， 打包更新js文件 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?