(React-Native 学习之八) Rn混合开发之--Android原生代码 和 ReactNative 通信，

(React-Native 学习之八) Rn混合开发之--Android原生代码 和 ReactNative 通信，

本篇讲述 Android 原生代码 和 ReactNative相互通信，方法之间的调用：

项目是接着上篇文章写得：

上篇：(React-Native 学习之七) Rn混合开发之–Activity直接引用React native组件

项目结构：

界面：

代码:

主要分三个部分 直接引用 Rn界面，和 原生调用 Rn吐司，以及Rn调用原生吐司。

直接引用界面已在上篇给出。

下面是 方法调用。当然还有其他通信方式 后续文章会添加：

步骤：

1，新建 通信接口类：
CommunicationInterface：

public class CommunicationInterface extends ReactContextBaseJavaModule{

    private  ReactApplicationContext reactContext;

    public CommunicationInterface(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

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

    /**
     * Rn 需要调用的方法：
     * @param message
     */
    @ReactMethod
    public void HandleMessage(String message){
        Toast.makeText(reactContext,message,Toast.LENGTH_LONG).show();
    }

    /**
     * 发送消息到  RN 界面
     */
    public void sendMessage(String params) {
        reactContext
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("mEventName", params);
    }
}

2，新建 ReactPackage：

MReactPacakge：

public class MReactPacakge implements ReactPackage {


    private List<NativeModule> nativeModules;

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        nativeModules = new ArrayList<>();
        nativeModules.add(new CommunicationInterface(reactContext));
        return nativeModules;
    }

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

    public NativeModule getInterf(int index) {
        if (nativeModules== null)
            return null;
        return nativeModules.get(index);
    }
}

3，Activivty 中添加 我们的 ReactMoudle：

public class Communicate3Activity extends BaseActivity implements DefaultHardwareBackBtnHandler {

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    private MReactPacakge reactPackage;
    private static int i = 0;

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

        mReactRootView = new ReactRootView(this);
        reactPackage = new MReactPacakge();
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
//                .setJSMainModuleName("index")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .addPackage(reactPackage)   //添加  本地 moudel
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

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

        //将  ReactView 模块添加进 布局
        LinearLayout linearLayout = (LinearLayout) findViewById(R.id.root_view);
        linearLayout.addView(mReactRootView);

        //添加  本地按钮的  点击事件：
        findViewById(R.id.native_btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //向 Rn 发送消息：
                if (reactPackage.getInterf(0)!=null){
                    ((CommunicationInterface)reactPackage.getInterf(0)).sendMessage("这是本地发送的消息" + i++);
                }
            }
        });
    }

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

//Rn 端监听 Android 原生 消息：

    componentWillMount(){
      DeviceEventEmitter.addListener('mEventName',
                           this.rnMethod.bind(this));
    }

    //处理：
    rnMethod(params){
      this.setState({info:params});
    }

// Rn 端 向 原生发送消息：

onPress = ()=> {
      // 这样 调用原生端  方法    原生来吐司  CommunicationInterface 是我们在上面定义接口  通信类getName  返回值
      NativeModules.CommunicationInterface.HandleMessage("Rn调用 原生 来吐司！！");
  }

致此便完成了我们的 简单通信。当然还有其他通信方式下回分解。

如果讲解不够详细：请移步GitHub：https://github.com/zqHero/AndroidKissReactNative

如果对你有用 欢迎fork 和star。 谢谢