我們用React Native 做混合開發(fā)的時(shí)候免不了要原生和React Native 進(jìn)行通信交互变屁，這篇文章就是分享原生模塊與JS傳遞數(shù)據(jù)的幾種方式昔案。
總的步驟可以分為如下幾點(diǎn)：
- 在原生端定義Module類,繼承ReactContextBaseJavaModule,在Module類里,定義交互的方法.
- 定義Package類饭庞，繼承ReactPackage,將Module實(shí)例添加到集合.
- 在android繼承的ReactApplication,回調(diào)實(shí)現(xiàn)getPackages方法，將Package實(shí)例添加到getPackages下的集合厘惦。
- 如下是Mudule類的實(shí)例代碼，為了方便大家理解烁焙，我把代碼全部貼出來，在一一講解耕赘。
import android.support.annotation.Nullable;
import android.widget.Toast;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import java.util.HashMap;
import java.util.Map;
public class ToastExample extends ReactContextBaseJavaModule{
private static final String LONG_TIME = "LONG";
private static final String SHORT_TIME = "SHORT";
private static final String MESSAGE = "MESSAGE";
public ToastExample(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "ToastForAndroid";
}
@ReactMethod
public void getDataFromIntent(Callback callback){
try{
Activity currentActivity=getCurrentActivity();
String result =currentActivity.getIntent().getStringExtra("data");
if(TextUtils.isEmpty(result)){
callback.invoke("no_data");
}else{
callback.invoke(result);
}
}catch (Exception e){
callback.invoke("error");
}
}
@Override
public Map<String, Object> getConstants() {
//讓js那邊能夠使用這些常量
Map<String,Object> constants = new HashMap<>();
constants.put(LONG_TIME, Toast.LENGTH_LONG);
constants.put(SHORT_TIME,Toast.LENGTH_SHORT);
constants.put(MESSAGE,"getConstants");
return constants;
}
@ReactMethod
public void show(int duration){
Toast.makeText(getReactApplicationContext(),"message:"+duration,duration).show();
}
@ReactMethod
public void sendEvent(){
onScanningResult();
}
@ReactMethod
public void testAndroidCallbackMethod(String msg, Callback callback){
Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_LONG).show();
callback.invoke("abc");
}
@ReactMethod
public void textAndroidPromiseMethod(String msg, Promise promise){
Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_SHORT).show();
String result="謝漢杰";
promise.resolve(result);
}
public void onScanningResult(){
WritableMap params = Arguments.createMap();
params.putString("key", "myData");
sendEvent(getReactApplicationContext(),"EventName",params);
}
public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
}
public void nativeCallRn(){
onScanningResult();
}
@Override
public boolean canOverrideExistingModule() {
return true;
}
}
在上面的Module代碼中,getName()方法返回的名字是是在RN代碼里面是需要這個(gè)名字來調(diào)用該類的方法,而@ReactMethod注解下的方法是我們自定義方法,表明這個(gè)方法可以被rn調(diào)用.至于上面四種形式的方法等步驟走完詳解考阱。
- 自定義ReactPackage 代碼如下：
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class ExampleReactNativePackage implements ReactPackage{
public ToastExample toastExample;
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
toastExample=new ToastExample(reactContext);
modules.add(toastExample);
return modules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
這一步很簡單，就是把上面的ToastExample類加入NativeModule而已
- 接著第三步也很簡單鞠苟，代碼如下
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import java.util.Arrays;
import java.util.List;
public class MyApplication extends Application implements ReactApplication{
public static final ExampleReactNativePackage exampleReactNativePackage=new ExampleReactNativePackage();
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
exampleReactNativePackage
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
這也不也只是把ExampleReactNativePackage添加進(jìn)ReactPackage而已，也很簡單秽之。
為此整個(gè)Android原生端已經(jīng)完成編寫当娱。接著就是編寫js端，下面也是js端的實(shí)例:(說句廢話考榨，我一般喜歡貼全部代碼在一一講解,這樣比較連貫)
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
ToastAndroid,
NativeModules,
DeviceEventEmitter
} from 'react-native';
export default class HelloWorld extends React.Component {
constructor(props){
super(props);
this.state={
text1:'ToastForAndroid',
text2:'testAndroidCallbackMethod',
text3:'textAndroidPromiseMethod',
text4:'DeviceEventEmitter',
text5:'getValue',
data:'no_data',
}
}
componentWillMount() {
DeviceEventEmitter.addListener('EventName', function (msg) {
console.log(msg);
let rest=NativeModules.ToastForAndroid.MESSAGE;
ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + rest, ToastAndroid.SHORT)
});
NativeModules.ToastForAndroid.getDataFromIntent((result)=>{
this.setState({data:result});
});
}
render() {
return (
<View style={styles.container}>
<Text>{this.state.data}</Text>
<TouchableOpacity onPress={this._onPressButton.bind(this)}>
<Text style={styles.hello}>{this.state.text1}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._onPressButton2.bind(this)}>
<Text style={styles.hello}>{this.state.text2}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._onPressButton3.bind(this)}>
<Text style={styles.hello}>{this.state.text3}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._onPressButton4.bind(this)}>
<Text style={styles.hello}>{this.state.text4}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._onPressButton5.bind(this)}>
<Text style={styles.hello}>{this.state.text5}</Text>
</TouchableOpacity>
</View>
)
}
_onPressButton(){
NativeModules.ToastForAndroid.show(1000);
}
_onPressButton2(){
NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{
this.setState({text:result});
});
}
_onPressButton3(){
NativeModules.ToastForAndroid.textAndroidPromiseMethod("abcx").then((result)=>{
this.setState({text3:result});
}).catch((error)=>{
this.setState({text:'error'});
})
}
_onPressButton4(){
NativeModules.ToastForAndroid.sendEvent();
}
_onPressButton5(){
ToastAndroid.show(NativeModules.ToastForAndroid.MESSAGE, ToastAndroid.SHORT)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorlds', () => HelloWorld);
這就是整個(gè)js端的調(diào)用實(shí)例跨细。在React Naitve層，RN端可通過 NativeModules.[module名].[方法名]來調(diào)起原生的方法河质，同時(shí)也可以通過RN端可通過 NativeModules.[module名].[參數(shù)名]的方式來獲取傳遞的參數(shù)冀惭，具體用法如上代碼。
而對于原生調(diào)用調(diào)用React Native里面的方法掀鹅，我們可以用RCTDeviceEventEmitter的方式散休，這種方式就相當(dāng)于我們Android中的廣播，具體對應(yīng)的原生代碼如下：
MyApplication.exampleReactNativePackage.toastExample.nativeCallRn();
和上面的代碼也是連貫一起的乐尊。
最后總結(jié)交互的四種方式
- 第一種最簡單戚丸，如上面代碼的
@ReactMethod
public void show(int duration){
Toast.makeText(getReactApplicationContext(),"message:"+duration,duration).show();
}
即用ReactMethod注解方法就可以調(diào)用原生了
- Callback 回調(diào)方式，如上面代碼的
@ReactMethod
public void testAndroidCallbackMethod(String msg, Callback callback){
Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_LONG).show();
callback.invoke("abc");
}
對應(yīng)的js代碼就是
_onPressButton2(){
NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{
this.setState({text:result});
});
}
即你傳入?yún)?shù)進(jìn)行操作然后給你回調(diào)結(jié)果
3.Promise 回調(diào)方式類似的就是RxJava.可以通過鏈?zhǔn)綄?fù)雜代碼結(jié)構(gòu)轉(zhuǎn)換為簡短易讀的代碼.扔嵌，如上面代碼的
@ReactMethod
public void textAndroidPromiseMethod(String msg, Promise promise){
Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_SHORT).show();
String result="謝漢杰";
promise.resolve(result);
}
對應(yīng)的js代碼就是
_onPressButton3(){
NativeModules.ToastForAndroid.textAndroidPromiseMethod("abcx").then((result)=>{
this.setState({text3:result});
}).catch((error)=>{
this.setState({text:'error'});
})
}
JS端通過then接口來獲取Promise的數(shù)據(jù),執(zhí)行錯(cuò)誤就返回error信息
- 通過事件方式：RCTDeviceEventEmitter限府，一般是native原生調(diào)用React Native 相當(dāng)于廣播。對應(yīng)上面代碼如下：
public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
}
對應(yīng)的js代碼就是
DeviceEventEmitter.addListener('EventName', function (msg) {
console.log(msg);
let rest=NativeModules.ToastForAndroid.MESSAGE;
ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + rest, ToastAndroid.SHORT)
});
Native發(fā)送原生事件然后React Native 注冊監(jiān)聽獲取信息痢缎。
在這里舉一個(gè)我們實(shí)戰(zhàn)的一個(gè)例子胁勺，就是啟動RN界面并且傳遞數(shù)據(jù)。怎么做呢独旷，剛開始的初學(xué)者還是一下子反應(yīng)不過來署穗，起始也很簡單，充分運(yùn)用我們上面的例子就行了嵌洼，
首先原生啟動代碼
Intent intent=new Intent(MainActivity.this,HelloReactActivity.class);
intent.putExtra("data","HelloJack");
startActivity(intent);
最終要的是是在上面 的ToastExample類里加入
@ReactMethod
public void getDataFromIntent(Callback callback){
try{
Activity currentActivity=getCurrentActivity();
String result =currentActivity.getIntent().getStringExtra("data");
if(TextUtils.isEmpty(result)){
callback.invoke("no_data");
}else{
callback.invoke(result);
}
}catch (Exception e){
callback.invoke("error");
}
}
然后在RN端獲取即可
NativeModules.ToastForAndroid.getDataFromIntent((result)=>{
this.setState({data:result});
});
同理其他情況請參考RN之Android:原生界面與React界面的相互調(diào)用及數(shù)據(jù)傳遞,這也是我的參考之一蛇捌。
最后獻(xiàn)上大家最期待的源碼https://github.com/jack921/ReactNativeParam還有什么不明白就開源碼吧
