我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式。
总的步骤可以分为如下几点:
- 在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法.
- 定义Package类,继承ReactPackage,将Module实例添加到集合.
- 在android继承的ReactApplication,回调实现getPackages方法,将Package实例添加到getPackages下的集合。
如下是Mudule类的实例代码,为了方便大家理解,我把代码全部贴出来,在一一讲解。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
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() {
}
@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代码里面是需要这个名字来调用该类的方法,而@ReactMethod注解下的方法是我们自定义方法,表明这个方法可以被rn调用.至于上面四种形式的方法等步骤走完详解。
自定义ReactPackage 代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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而已
接着第三步也很简单,代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
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添加进ReactPackage而已,也很简单。
为此整个Android原生端已经完成编写。接着就是编写js端,下面也是js端的实例:(说句废话,我一般喜欢贴全部代码在一一讲解,这样比较连贯)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
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);
|
这就是整个js端的调用实例。在React Naitve层,RN端可通过 NativeModules.[module名].[方法名]来调起原生的方法,同时也可以通过RN端可通过 NativeModules.[module名].[参数名]的方式来获取传递的参数,具体用法如上代码。
而对于原生调用调用React Native里面的方法,我们可以用RCTDeviceEventEmitter的方式,这种方式就相当于我们Android中的广播,具体对应的原生代码如下:
1
|
MyApplication.exampleReactNativePackage.toastExample.nativeCallRn();
|
和上面的代码也是连贯一起的。
最后总结交互的四种方式
第一种最简单,如上面代码的
1
2
3
4
|
@ReactMethod
public void show( int duration){
Toast.makeText(getReactApplicationContext(), "message:" +duration,duration).show();
}
|
即用ReactMethod注解方法就可以调用原生了
Callback 回调方式,如上面代码的
1
2
3
4
5
|
@ReactMethod
public void testAndroidCallbackMethod(String msg, Callback callback){
Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_LONG).show();
callback.invoke( "abc" );
}
|
对应的js代码就是
1
2
3
4
5
|
_onPressButton2(){
NativeModules.ToastForAndroid.testAndroidCallbackMethod( "HelloJack" ,(result)=>{
this .setState({text:result});
});
}
|
即你传入参数进行操作然后给你回调结果
3.Promise 回调方式类似的就是RxJava.可以通过链式将复杂代码结构转换为简短易读的代码.,如上面代码的
1
2
3
4
5
6
|
@ReactMethod
public void textAndroidPromiseMethod(String msg, Promise promise){
Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_SHORT).show();
String result= "谢汉杰" ;
promise.resolve(result);
}
|
对应的js代码就是
1
2
3
4
5
6
7
|
_onPressButton3(){
NativeModules.ToastForAndroid.textAndroidPromiseMethod( "abcx" ).then((result)=>{
this .setState({text3:result});
}). catch ((error)=>{
this .setState({text: 'error' });
})
}
|
JS端通过then接口来获取Promise的数据,执行错误就返回error信息
通过事件方式:RCTDeviceEventEmitter,一般是native原生调用React Native 相当于广播。对应上面代码如下:
1
2
3
|
public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter. class ).emit(eventName, params);
}
|
对应的js代码就是
1
2
3
4
5
|
DeviceEventEmitter.addListener( 'EventName' , function (msg) {
console.log(msg);
let rest=NativeModules.ToastForAndroid.MESSAGE;
ToastAndroid.show( "DeviceEventEmitter收到消息:" + "\n" + rest, ToastAndroid.SHORT)
});
|
Native发送原生事件然后React Native 注册监听获取信息。
在这里举一个我们实战的一个例子,就是启动RN界面并且传递数据。怎么做呢,刚开始的初学者还是一下子反应不过来,起始也很简单,充分运用我们上面的例子就行了,
首先原生启动代码
1
2
3
|
Intent intent= new Intent(MainActivity. this ,HelloReactActivity. class );
intent.putExtra( "data" , "HelloJack" );
startActivity(intent);
|
最终要的是是在上面 的ToastExample类里加入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@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端获取即可
1
2
3
|
NativeModules.ToastForAndroid.getDataFromIntent((result)=>{
this .setState({data:result});
});
|
同理其他情况请参考RN之Android:原生界面与React界面的相互调用及数据传递 ,这也是我的参考之一。
最后献上大家最期待的源码 https://github.com/jack921/ReactNativeParam 还有什么不明白就开源码吧
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://www.jianshu.com/p/253904e8f517