出处
https://github.com/crazycodeboy/RNStudyNotes/tree/master/React%20Native%E5%8E%9F%E7%94%9F%E6%A8%A1%E5%9D%97%E5%90%91JS%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F
有时需要在native和js之间传递数据,有以下几种方式
Callback
Callback是最常用的设计模式之一。无论是java,oc,c#,还是js等都会看到Callback的身影;
native支持Callback类型的参数,该Callback对应js中的function。
- 写法
//native部分
public class EasyKitModule extends ReactContextBaseJavaModule {
private static final String TAG = EasyKitModule.class.getSimpleName();
public EasyKitModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "EasyKit";
}
@ReactMethod//三个参数分别对应 js向native传的参数、js失败回调方法、js成功回调方法
public void runWithCallback(String params, Callback errorCallback, Callback successCallback) {
Log.i(TAG + "_params:", params);
try {
successCallback.invoke(getResult());//通过invoke方法将数据返回给js
} catch (Exception e) {
errorCallback.invoke(e.getMessage());
}
}
...
}
//js部分
export default class Tab1 extends BaseComponent {
_onPress = () => {
this._invokeNativeWithCallback()
}
_invokeNativeWithCallback = () => {
let greetFromJS = 'hello,it is from reactjs'
const errCallback = (errCode, errMsg) => {
console.log(errCode, errMsg)
}
const successCallback = (data) => {
console.log(data)
}
EasyKit.runWithCallback(//这里的三个参数与原生模块中的方法相对应
greetFromJS,
errCallback,
successCallback,
)
}
...
}
Promise
Promises是es6的一个新的特性,在rn中非常重要。native也支持Promise。
- 写法
//native部分
@ReactMethod//接收参数对应js向native传递的参数,js中的Promise容器
public void runWithPromise(String params, Promise promise) {
Log.i(TAG + "_params:", params);
try {
int a = 10 / 0;
promise.resolve(getResult());
} catch (Exception e) {
promise.reject(TAG, e.getMessage());
}
}
//js部分
_invokeNativeWithPromise = () => {
let greetFromJS = 'hello,it is from reactjs'
new Promise((resolve, reject) => {
const result = EasyKit.runWithPromise(greetFromJS)//这里调用native方法的时只需传前面的参数
resolve(result)
}).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error)
})
}
Event
native支持以事件的方式向js发送数据,像Android中的广播,iOS中的通知中心;接收方注册接收该事件即可接收到native发送的事件。
- 写法
这里通过js调用native方法来发送事件
//native部分
@ReactMethod
public void sendEventFromNative(String params) {
WritableMap map = Arguments.createMap();
map.putString("nativeMsg", "hello,it is a global event from native");
sendEvent(getReactApplicationContext(), "wishesFromNative", map);
}
private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);//发送的事件包括事件名和需要传递的数据
}
//js部分
_sendEventFromNative = () => {
let greetFromJS = 'hello,it is from reactjs'
//触发native发送事件
EasyKit.sendEventFromNative(greetFromJS)
}
//定义事件处理方法
_handleNativeEvent = (data) => {
console.log('tab_1 receives a native event', data)
}
componentDidMount() {
//这里需要先添加事件监听 参数分别为 时间名、事件处理方法
DeviceEventEmitter.addListener('wishesFromNative', this._handleNativeEvent)
}
componentWillUnmount() {
//当必要时 可注销监听事件
DeviceEventEmitter.removeListener('wishesFromNative')
}
方式对比
类型 | 缺点 | 优点 |
---|---|---|
Callback | 单次传递 | 传递过程可控 |
Promise | 单次传递 | 传递过程可控 |
Event | native驱动,js被动接收 | 可多端接收 |
网友评论