混合开发的大趋势之一React Native与Android联调

转载请注明出处：王亟亟的大牛之路

先安利，有空我都会更，看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android

公司某个app的rn模块已经上线了，虽然我没参与，但是从调研开始我都有大致了解，然后今天去学系列下，结合官方例子就写了这篇

---

基础配置部分

解说过程是从你Native加入rn模块，新建的rn项目配置的东西都有

首先 在你的项目根目录同级开一个rn目录(这里只是举个例子)

mkdir xxx-rn && cd xxx-rn

像这样

xxx-rn就是刚才新建的文件夹

lib和project就是你原有的项目

---

然后下所需的包以及生成package.json文件

可能需要翻墙，或者跑tb的镜像

npm init以及npm install react react-native --save

---

再然后就把你的js代码丢到这里就行了，丢完之后启动服务

node node_modules/react-native/local-cli/cli.js start

就是起一个node.js的服务

---

然后在package.json文件里添加这段脚本

  "scripts": {    "start": "node node_modules/react-native/local-cli/cli.js start"  },

以后就直接 npm start就能跑 不用打一长串路径，类似于 win的环境变量

---

通常 rn的编译会跑 外网maven但是其实现在新版本rn发布都是走的npm，所以这些依赖都在你的”本地maven”环境里，所以需要修改主项目的build.gradle

allprojects {    repositories {        mavenLocal()        jcenter()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }    }}

一定要先mavenLocal()不然maven{}将没有效果，指向的地址其实也就是本地的”com.facebook.react.react-native”

这些都加完了ok，那再添加react-native 依赖

dependencies {    compile fileTree(dir: "libs", include: ["*.jar"])    compile "com.android.support:appcompat-v7:23.0.1"    compile "com.facebook.react:react-native:+"  // From node_modules}

---

至此 基本的配置就都ok了，开始搞安卓代码（这部分官网抄的）

安卓代码部分

//需要继承ReactActivitypublic class MainActivity extends ReactActivity {    //根视图    private ReactRootView reactRootView;    //RN管理类    private ReactInstanceManager reactInstanceManager;    /**     * Returns the name of the main component registered from JavaScript.     * This is used to schedule rendering of the component.     */    @Override    protected String getMainComponentName() {        return "WjjPro";    }    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //初始化        reactRootView = new ReactRootView(this);        //初始化,这部分可以看api文档，具体字段内容还是比较多的        reactInstanceManager = ReactInstanceManager.builder()                //应用上下文                .setApplication(getApplication())                //js打包的名字                .setBundleAssetName("index.android.bundle")                //js首页                .setJSMainModuleName("index.android")                //基础的各种manager                .addPackage(new MainReactPackage())                .setUseDeveloperSupport(BuildConfig.DEBUG)                //初始化执行的时间                .setInitialLifecycleState(LifecycleState.BEFORE_RESUME)                .build();        reactRootView.startReactApplication(reactInstanceManager, "WjjPro", null);        //渲染        setContentView(reactRootView);    }    @Override    public void invokeDefaultOnBackPressed() {        super.onBackPressed();    }    @Override    protected void onPause() {        super.onPause();        Log.d("--->","onPause");        if (reactInstanceManager != null) {            reactInstanceManager.onHostPause();        }    }    @Override    protected void onResume() {        super.onResume();        Log.d("--->","onResume");        if (reactInstanceManager != null) {            reactInstanceManager.onHostResume(this, this);        }    }    @Override    protected void onDestroy() {        super.onDestroy();        Log.d("--->","onDestroy");        if (reactInstanceManager != null) {            reactInstanceManager.onHostDestroy();        }    }    @Override    public void onBackPressed() {        Log.d("--->","onBackPressed");        if (reactInstanceManager != null) {            reactInstanceManager.onBackPressed();        } else {            super.onBackPressed();        }    }//    @Override//    public boolean onKeyUp(int keyCode, KeyEvent event) {//        if (keyCode == KeyEvent.KEYCODE_BACK && reactInstanceManager != null) {//            reactInstanceManager.showDevOptionsDialog();//            return true;//        }//        return super.onKeyUp(keyCode, event);//    }}

reactInstanceManager做了一个统筹管理，把我们Native的各种行为与rn的js页面做关联，分发以及管理

通过log明显2者的关联已经有效

例子源码地址：https://github.com/ddwhan0123/ReactNativeDemo