本文主要介紹RN與android之間的通信固蚤，大神繞步
混合開發(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中寫一個(gè)按鈕运翼，并且綁定點(diǎn)擊事件調(diào)用原生方法
2.寫一個(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;
}
}
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);
}
