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.

创建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”
在build.gradle文件中添加React Native依赖

compile ‘com.facebook.react:react-native:0.20.+’
添加展现代码,启动一个React应用并把它设置为Activity的主要内容视图(代码在最后)
创建一个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 里面查询更新。

基本安装: 参考 
- npm install -g code-push-cli
- code-push register //注册
- code-push app add ‘app_name’
在项目根目录执行以下命令安装react-native-code-push模块

npm install –save react-native-code-push
引入项目,在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')
}

代码中加入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 

React Native & Code Push

React Native

Android项目中集成React Native.

Code Push

相关文章