React Native要想與Android進(jìn)行通信，需要先做通用的準(zhǔn)備工作，主要分為如下三步：
- 在原生端定義繼承自ReactContextBaseJavaModule的ToastExample 類违柏，在ToastExample 類里吱型，定義交互的方法存筏。
public class ToastExample extends ReactContextBaseJavaModule {
public static final String LONG_TIME = "LONG";
public static final String SHORT_TIME = "SHORT";
public static final String MESSAGE = "MESSAGE";
public ToastExample(ReactApplicationContext reactContext) {
super(reactContext);
}
/**
* 該方法的返回值是在RN中需要這個值來調(diào)用該類的方法
* @return
*/
@Override
public String getName() {
return "ToastForAndroid";
}
@Override
public boolean canOverrideExistingModule() {
return true;
}
}
- 定義繼承自ReactPackage的ExampleReactNativePackage類碍岔，將ToastExample 實例添加到集合；
public class ExampleReactNativePackage implements ReactPackage {
private ToastExample mToastExample;
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
mToastExample = new ToastExample(reactContext);
modules.add(mToastExample);
return modules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
- 定義繼承自ReactApplication的MainApplication類擎厢，重寫getPackages方法究流，將ExampleReactNativePackage實例添加到集合中。
public class MainApplication 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
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
下面我們具體來了解React Native和Android之間的幾種通信方式动遭，
第一種：
- 原生代碼,在ToastRxample.java中添加下面方法芬探。
@ReactMethod
public void show(int duration){
Toast.makeText(getReactApplicationContext(), "message:"+duration,duration).show();
}
注：@ReactMethod表示該方法可以被RN調(diào)用。
- RN（React Native的簡稱厘惦，下同）代碼偷仿，在App.js中添加調(diào)用代碼，
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
AppRegistry,
TouchableOpacity,
ToastAndroid,
NativeModules,
DeviceEventEmitter
} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
constructor(props){
super(props);
this.state = {
text1:"ToastForAndroid",
}
this.componenWillMount();
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Android與React Native之間的通信有以下幾種方式:</Text>
<TouchableOpacity onPress={this._onPressButton.bind(this)}>
<Text style={styles.hello}>{this.state.text1}</Text>
</TouchableOpacity>
</View>
);
}
_onPressButton(){
NativeModules.ToastForAndroid.show(1000);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection:'column',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
hello:{
fontSize: 16,
textAlign:'center',
margin: 10,
},
title:{
fontSize:20,
color: '#f00',
margin:20,
}
});
上面的代碼很好理解宵蕉，方法_onPressButton是最重要的一塊酝静，RN通過NativeModus.[ToastExample中g(shù)etName的返回值].[ToastExample中的方法]來調(diào)用原生的方法。
第二種：
- 原生代碼羡玛，
@ReactMethod
public void testAndroidCallbackMethod(String msg,Callback callback){
Toast.makeText(getReactApplicationContext(), msg, Toast.LENGTH_LONG).show();
callback.invoke("abc");
}
callback是RN提供的别智，我們可以利用Callback返回數(shù)據(jù)給RN。
- RN代碼稼稿，代碼和上變的類似薄榛，只是調(diào)用的方法不一樣而已，調(diào)用了Android的testAndroidCallbackMethod方法让歼。
_onPressButton2(){
NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{
this.setState({text2:result});
})
}
result就是Android中傳過來的數(shù)據(jù)'abc'敞恋。
第三種：
- 原生代碼
@ReactMethod
public void testAndroidPromiseMethod(String msg, Promise promise){
Toast.makeText(getReactApplicationContext(), msg, Toast.LENGTH_SHORT).show();
String result = "高娟娟";
promise.resolve(result);
}
- RN代碼
_onPressButton3(){
NativeModules.ToastForAndroid.testAndroidPromiseMethod("abcx").then((result)=>{
this.setState({text3:result});
}).catch((error)=>{
this.setState({text:'error'});
})
}
第四種:
- 原生代碼
public static final String LONG_TIME = "LONG";
public static final String SHORT_TIME = "SHORT";
public static final String MESSAGE = "MESSAGE";
@Override
public Map<String,Object> getConstants(){
//讓js那邊能夠使用這些常量
Map<String,Object> constans = new HashMap<>();
constans.put(LONG_TIME, Toast.LENGTH_LONG);
constans.put(SHORT_TIME, Toast.LENGTH_SHORT);
constans.put(MESSAGE, "這是MESSAGE的值");
return constans;
}
private void sendEvent(ReactApplicationContext reactContext, String eventName, WritableMap params) {
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,params);
}
- RN代碼，設(shè)置監(jiān)聽谋右，在監(jiān)聽中獲取ToastForAndroid中的一些值硬猫。
constructor(props){
super(props);
this.componenWillMount();
}
componenWillMount(){
DeviceEventEmitter.addListener('EventName',function (msg) {
console.log(msg);
let rest = NativeModules.ToastForAndroid.MESSAGE;
ToastAndroid.show("DeviceEventEmitter收到的消息："+"\n"+rest,ToastAndroid.SHORT);
});
}
_onPressButton4(){
NativeModules.ToastForAndroid.sendEvent();
}
測試結(jié)果會發(fā)現(xiàn)，監(jiān)聽中獲取到的rest值是“這是MESSAGE的值”改执。
源碼地址
我也是初學(xué)階段浦徊，希望這些對大家有用，有不懂的地方天梧，大家可以一起討論。
