RN与android简单通信（四）

本文主要介绍RN与android之间的通信，大神绕步
混合开发中，我们经常会遇到各种各样的通信问题，比如java和C++之间的互相调用，ok，闲话少说，我们直入主题。

首先我们来实现一个简单功能：在js中点击一个按钮，传递一个字符串到native，然后在native端改变这个字符串，并返回给js端，说干就干，步骤如下

1.js中写一个按钮，并且绑定点击事件调用原生方法
2.写一个Module，并且添加到Package
3.native接受传递过来的参数，处理参数回调回js

接下来，我们会逐一实现上述步骤
1.在js里添加如下代码

'use strict'
import React, { Component} from 'react';
import { AsyncStorage,NativeModules,ToastAndroid } from 'react-native';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View
} from 'react-native';

let title = 'React Native界面';

export default class YRNTest extends Component {
    /**
    * Callback 通信方式
    */
    callbackComm(msg) {
        NativeModules.CommonModule.rnCallNativeFromCallback(msg,(result) => {
             ToastAndroid.show("CallBack收到消息:" + result, ToastAndroid.SHORT);
        })
    }

    /**
    * Promise 通信方式
    */
    promiseComm(msg) {
        NativeModules.CommonModule.rnCallNativeFromPromise(msg).then(
            (result) =>{
                ToastAndroid.show("Promise收到消息:" + result, ToastAndroid.SHORT)
            }
        ).catch((error) =>{console.log(error)});
    }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} >
            {title}
        </Text>
        <Text style={styles.welcome} onPress={this.callbackComm.bind(this,'你好啊，android')}>
             Callback通信方式
        </Text>
        <Text style={styles.welcome} onPress={this.promiseComm.bind(this,'你好啊，android')}>
             Promise通信方式
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

AppRegistry.registerComponent('YRNTest', () => YRNTest);

注意这里的NativeModules.CommonModule.rnCallNativeFromCallback，我们js调用Native一般都是采用的NativeModules.模块名称.模块方法名称
2.定义Module类，继承ReactContextBaseJavaModule,在Module类中，我们定义一些交互的方法

public class CommonModule extends ReactContextBaseJavaModule {
    public CommonModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

  /**
     * RN调用Native的方法
    * Callback方式回调
     */
    @ReactMethod
    public void rnCallNativeFromCallback(String param, Callback callback) {
        String a = "啧啧啧：" + param;
        if (callback != null)
            callback.invoke(a);
    }

 /**
     * RN调用Native的方法
    * Promise方式回调
     */
    @ReactMethod
    public void rnCallNativeFromPromise(String msg, Promise promise) {
        String result = "啧啧啧：" + msg;
        promise.resolve(result);
    }

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

注意这里的getName方法返回的字符串要与上面的NativeModules.模块名称.模块方法名称里的模块名称保持一致。rnCallNativeFromCallback要与上面的NativeModules.模块名称.模块方法名称里的模块方法名称保持一致，并且在rnCallNativeFromCallback方法上还需要加上@ReactMethod注解

定义Package，实现ReactPackage接口，在createNativeModules方法里把自定义的CommonModule添加进去

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

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

最后在MyApplication里添加自定义的Package 1525320513500.jpg

3.这里只介绍Native回调回js的两种方式：CallBack和Promise

首先看一下Callback方式，通过callback的invoke方法把参数带回去

    @ReactMethod
    public void rnCallNativeFromCallback(String param, Callback callback) {
        String a = "啧啧啧：" + param;
        if (callback != null)
            callback.invoke(a);
    }

再来看下Promise方式，通过Promise的resolve方法把参数带回去

 @ReactMethod
    public void rnCallNativeFromPromise(String msg, Promise promise) {
        String result = "啧啧啧：" + msg;
        promise.resolve(result);
    }