本文主要介紹RN與android之間的通信，大神繞步
混合開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到各種各樣的通信問(wèn)題，比如java和C++之間的互相調(diào)用，ok，閑話少說(shuō)，我們直入主題。

首先我們來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單功能：在js中點(diǎn)擊一個(gè)按鈕，傳遞一個(gè)字符串到native，然后在native端改變這個(gè)字符串，并返回給js端，說(shuō)干就干，步驟如下

1.js中寫(xiě)一個(gè)按鈕，并且綁定點(diǎn)擊事件調(diào)用原生方法
2.寫(xiě)一個(gè)Module，并且添加到Package
3.native接受傳遞過(guò)來(lái)的參數(shù)，處理參數(shù)回調(diào)回js

接下來(lái)，我們會(huì)逐一實(shí)現(xiàn)上述步驟
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調(diào)用Native一般都是采用的NativeModules.模塊名稱.模塊方法名稱
2.定義Module類，繼承ReactContextBaseJavaModule,在Module類中，我們定義一些交互的方法

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

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

 /**
     * RN調(diào)用Native的方法
    * Promise方式回調(diào)
     */
    @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，實(shí)現(xiàn)ReactPackage接口，在createNativeModules方法里把自定義的CommonModule添加進(jìn)去

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;
    }
}

1525320513500.jpg

3.這里只介紹Native回調(diào)回js的兩種方式：CallBack和Promise

首先看一下Callback方式，通過(guò)callback的invoke方法把參數(shù)帶回去

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

再來(lái)看下Promise方式，通過(guò)Promise的resolve方法把參數(shù)帶回去

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