mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
    .setApplication(getApplication())
    .setBundleAssetName("index.android.bundle")
    .setJSMainModuleName("index.android")
    .addPackage(new MainReactPackage())
//        .setUseDeveloperSupport(BuildConfig.DEBUG) //开发者支持，BuildConfig.DEBUG的值默认是false，无法使用开发者菜单
    .setUseDeveloperSupport(true)        //开发者支持,开发的时候要设置为true，不然无法使用开发者菜单
    .setinitialLifecycleState(LifecycleState.RESUMED)
    .build();

// 注意这里的react-example必须对应“index.android.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager,"peoplus",null);

接触到混合应用开发提议后，首先想到了之前学的ionic，其次便是这两年火遍全球的RN，由于ionic框架用的angular.js，而且angular1和angular2写法区别很大，angular2对于初学者还是比较好接受的，但是angular1写的很乱，代码很难维护，便放弃了。决定用RN后觉得还是蛮顺手的，跟angular2很相似，又是ES6，很快便能入手，框架的选择还需要考虑的是插件的支持，尤其是：推送，广播，二维码扫描，服务，本地数据存储这些功能能否实现，由于要与硬件厂商对接，用到广播，就研究了一下如何用RN实现广播。

百度了所有的资料就是找不到如何RN实现原生广播，没有一篇类似的，于是查看一下RN项目结构，看了安卓后决定用AS加载一下看看能不能在里边编辑一下，发现MainApplication能够在应用启动时执行onCreate方法，那么我就一定能在onCreate时Toast一段话或发送一个广播的动作，那么接受发送广播基本实现了，果不其然广播真的接受到了。那么下面我要解决的问题便是RN事件如何触发android原生java代码中的方法，如果这个问题解决了，我就能通过点击事件发送一个广播。

一、RN项目添加广播，跟原生添加广播一样，两种方法，我们采用其中一种常驻广播：

<receiver android:name=".MybroadcastReceiver">
            <intent-filter>
                <action android:name="com.example.broadcastreceiverdemo.broADCAST"></action>
            </intent-filter>
        </receiver>

广播要处理的就是toast一段话：

public class MybroadcastReceiver extends broadcastReceiver {

    @Override
    public void onReceive(Context arg0,Intent arg1) {
        // Todo Auto-generated method stub
        String string=arg1.getStringExtra("data");
        Toast.makeText(arg0,"received:"+string,Toast.LENGTH_SHORT).show();

    }

}

二、React Native 调用原生Android模块
该方法参考：http://www.cnblogs.com/lgp142332/p/6024280.html
我们首先来创建一个原生模块。一个原生模块是一个继承了ReactContextBaseJavaModule的java类，它可以实现一些JavaScript所需的功能。我们这里的目标是可以在JavaScript里写ToastAndroid.show(‘Awesome’,ToastAndroid.SHORT);，来调起一个Toast通知。

package com.testproject.module;

import android.content.Intent;
import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

/** * Created by Administrator on 2017/4/15. */

public class SendbroadcastModule extends ReactContextBaseJavaModule {

    public SendbroadcastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "Sendbroadcast";
    }

    @ReactMethod
    public void sendbroadcast(){
        //发送广播
        Toast.makeText(getReactApplicationContext(),"开始发送...",Toast.LENGTH_SHORT).show();
        Intent intent=new Intent("com.example.broadcastreceiverdemo.broADCAST");
        intent.putExtra("data","hello");
        getReactApplicationContext().sendbroadcast(intent);
    }

    @Override
    public boolean canOverrideExistingModule() {
        return true;
    }
}

ReactContextBaseJavaModule要求派生类实现getName方法。这个函数用于返回一个字符串名字，这个名字在JavaScript端标记这个模块。这里我们把这个模块叫做Sendbroadcast，这样就可以在JavaScript中通过React.NativeModules.Sendbroadcast访问到这个模块。

注意：模块名前的RCT前缀会被自动移除。所以如果返回的字符串为”RCTSendbroadcast”，在JavaScript端依然通过React.NativeModules.Sendbroadcast访问到这个模块。

要导出一个方法给JavaScript使用，Java方法需要使用注解@ReactMethod。方法的返回类型必须为void。React Native的跨语言访问是异步进行的，所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件。

注册模块

在Java这边要做的最后一件事就是注册这个模块。我们需要在应用的Package类的createNativeModules方法中添加这个模块。如果模块没有被注册，它也无法在JavaScript中被访问到。

package com.testproject.module;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.testproject.module.SendbroadcastModule;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/** * Created by Administrator on 2017/4/15. */

public class SendbroadcastPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules=new ArrayList<>();
        modules.add(new SendbroadcastModule(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

注意：重写的两个方法createJSModules和createViewManagers不能return null,否则运行会报红屏AddAll的错误，一定要return Collections.emptyList();

接着我们需要在MainApplication中的getPackages方法中注册：

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),new BarcodeScannerPackage(),new RealmReactPackage(),new SendbroadcastPackage()//注册广播模块
      );
    }

接下来便是RN的js代码了：

为了让你的功能从JavaScript端访问起来更为方便，通常我们都会把原生模块封装成一个JavaScript模块。这不是必须的，但省下了每次都从NativeModules中获取对应模块的步骤。这个JS文件也可以用于添加一些其他JavaScript端实现的功能。

var { NativeModules } = require('react-native');

export { NativeModules as default }

然后在你需要调用的componet中引入NativeModules并调用发送广播的方法：

<Text onPress={ () => {
              ToastAndroid.show("。。。",ToastAndroid.SHORT);
              NativeModules.Sendbroadcast.sendbroadcast();
            }}>发送广播</Text>

该篇文章实现方法其实和之前的第八篇-React Native实现调用android原生java方法并实现广播的发送和接受，方法类似，只不过调用原生方法里的动作不同，一个是启动servicer，一个是启动activity。所以本篇不多讲直接先看效果：

一、用AS打开项目目录的android项目，并添加一个activity，该activity中未添加任何逻辑操作：

package com.myreduxproject;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class UserInfoActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_user_info);
    }
}

二、添加MyIntentModule类，并继承ReactContextBaseJavaModule实现其方法和构造函数。在该类中添加方法，注意：方法头要加@ReactMethod

package com.myreduxproject;

import android.app.Activity;
import android.content.Intent;

import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

/** * Created by Administrator on 2017/5/22. */

public class MyIntentModule extends ReactContextBaseJavaModule {

    public MyIntentModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "IntentMoudle";
    }

    @ReactMethod
    public void startActivityFromJS(String name,String params){
        try{
            Activity currentActivity = getCurrentActivity();
            if(null!=currentActivity){
                Class toActivity = Class.forName(name);
                Intent intent = new Intent(currentActivity,toActivity);
                intent.putExtra("params",params);
                currentActivity.startActivity(intent);
            }
        }catch(Exception e){
            throw new JSApplicationIllegalArgumentException(
                    "不能打开Activity : "+e.getMessage());
        }
    }
//注意：记住getName方法中的命名名称，JS中调用需要
//注意：startActivityFromJS方法添加RN注解(@ReactMethod)，否则该方法将不被添加到RN中
}

三、添加MyReactPackage类，实现ReactPackage接口里的方法，在重写方法createNativeModules里注册上一步添加的模块：

package com.myreduxproject;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

/** * Created by Administrator on 2017/5/22. */

public class MyReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new MyIntentModule(reactContext));
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

四、接着在MainApplication中的getPackages方法中注册到ReactPackage中：

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),**new MyReactPackage(),**
              new BaiduMapPackage(getApplicationContext())
      );
    }

五、接下来的工作便是RN的代码，首先引入NativeModules

import {NativeModules} from 'react-native';

然后通过NativeModules调用我们创建的类中的方法：

NativeModules
      .IntentMoudle
      .startActivityFromJS("com.myreduxproject.UserInfoActivity",null);

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

react-native-cli: 2.0.1
react-native: 0.56.0

npm uninstall -g react-native-cli
npm uninstall -g react-native

npm install -g react-native@0.55.4
npm install -g react-native-cli@1.2.0

react-native init --version="0.55.4" myFirstApp

npm install --save-dev babel-preset-react-native@2.1.0

     ndk {
            //设置支持的SO库架构
            abiFilters ''armeabi'', ''x86'', ''armeabi-v7a'', ''x86_64'', ''arm64-v8a''
        }

        packagingOptions {
            exclude "lib/arm64-v8a/libgnustl_shared.so"
            exclude "lib/arm64-v8a/libijkffmpeg.so"
            exclude "lib/arm64-v8a/libijkplayer.so"
            exclude "lib/arm64-v8a/libijksdl.so"
            exclude "lib/arm64-v8a/libimagepipeline.so"
            exclude "lib/arm64-v8a/librtmp-jni.so"

        }

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
        //添加这个maven地址，不然无法下载 react-native库
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

dependencies {
.........
api "com.facebook.react:react-native:0.55.4"
}

<uses-permission android:name="android.permission.INTERNET" />
//我还要添加一个权限，建议也添加了
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

public class MyReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private final int OVERLAY_PERMISSION_REQ_CODE = 1;
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //这里不加权限判断 6.0或以上机型会闪退
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                        Uri.parse("package:" + getPackageName()));
                startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
            }
        }


        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                //这是设置assets目录下的打包过的js文件名 这个文件可用命令生成 但调试期间我们使用npm server动态注入 发布时才将它打进assets
                .setBundleAssetName("index.android.bundle")
                //这里设置js入口文件 旧一点的api可能是setJSMainModuleName 但我的版本是0.51.0 取而代之的是setJSMainModulePath方法
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        // 注意这里的“FirstApp”必须
        // 对应index.js”中的“AppRegistry.registerComponent()”的第一个参数值
        // 对应“package.json”中的“name”属性值
        // 最好也将“app.json”中的“name”和“displayName”改成它
        mReactRootView.startReactApplication(mReactInstanceManager, "FirstApp", null);
        setContentView(mReactRootView);

    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                if (!Settings.canDrawOverlays(this)) {

                }
            }
        }
    }
    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }
    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }
    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

1.首先集成的项目目录

我使用的是直接依照react-native init Project 的格式来导入的，也就是说，我的Android项目目录是跟node_modules是在1个目录下的。

我们init完项目以后，项目初始化完成了，这时候候我们可以用命令react-native run-android直接运行项目，至于怎样调试，之前已说过。

说1下我们怎样开发和运行分开吧，我们开发1般会选择webstrom，开发后我们会Android和ios的编译分开。

启动npm

下面说1下android 嵌入RN环境吧。

编写Android原生代码，用来调用RN

注意要加上网络等1些权限。

创建package.json，添加react native包

使用命令npm init，随着步骤走就行了，给大家截个图：

最后你就能够在你的RN项目里面看到1个package.json。

运行Demo

注：可能会出现java.lang.RuntimeException: Could not get BatchedBridge,make sure your bundle is packaged correctly这个毛病，

react-native bundle —platform android —dev false —entry-file index.android.js —bundle-output ReactDemo/app/src/main/assets/index.android.bundle —sourcemap-outpu ReactDemo/app/src/main/assets/index.android.map —assets-dest ReactDemo/app/src/main/res/