本文主要介绍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;
}
}
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);
}
