当前位置：首页 > news >正文

react-native和原生android的交互

news 2024/9/26 1:18:46

连接react-native和原生android
1. 可以参考我上一篇博客：react-native连接android原生模块-CSDN博客
2. 这篇博客需要参考我的上一篇博客，下面的CalendarModule对象也是在上一篇博客里。

方式一：在android的方法直接return数据

在原生模块直接return相对应的数据，在android编写方法。

@Override
public Map<String, Object> getConstants() {final Map<String, Object> constants = new HashMap<>();constants.put("DEFAULT_EVENT_NAME", "New Event");return constants;
}

这个方法编写在 CalendarModule 里面。

在react-native中加入getConstants，在CalendarModule.getConstant的方法写出。

import {NativeModules} from 'react-native';
const {CalendarModule} = NativeModules;const {DEFAULT_EVENT_NAME} = CalendarModule.getConstants();
console.log(DEFAULT_EVENT_NAME); // New Event

效果图：

方式二：传入回调函数

原生模块还支持一种独特的参数类型:回调函数。回调函数用于将数据从 Java/Kotlin 异步传递到 JavaScript，同时也可用于从原生端异步执行 JavaScript 代码。

使用方法是react-native中编写方法 createCalendarEvent，传入回调方法。

CalendarModule.createCalendarEvent('testName','testLocation',(error, eventId) => {if (error) {console.error(`Error found! ${error}`);}console.log(`event id ${eventId} returned`);},
);

在android端编写触发回调。

@ReactMethod(isBlockingSynchronousMethod = true)
public void createCalendarEvent(String name, String location, Callback callBack) {Integer eventId = 123;callBack.invoke(null, eventId);
}

触发的效果。

方式三：使用Promises
1. 原生模块也可以实现Promise，使用它可以简化你的javascript代码，尤其是在使用ES2016的async/await语法时。当原生模块方法的最后一个参数为Promise时，对应的方法将返回一个JS Promise对象。
2. 在android中加入方法，然后在Promise调用方法 resolve。
```
@ReactMethod(isBlockingSynchronousMethod = true)
public void createCalendarEvent(String name, String location, Promise promise) {try {Integer eventId = 123;promise.resolve(eventId);} catch(Exception e) {promise.reject("Create Event Error", e);}
}
```

方式四：向 JavaScript 发送事件

android编写：

...
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.Arguments;
...
private void sendEvent(ReactContext reactContext，String eventName，@Nullable WritableMap params) {reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName， params);
}private int listenerCount = 0;@ReactMethod
public void addListener(String eventName) {if (listenerCount == 0) {// Set up any upstream listeners or background tasks as necessary}listenerCount += 1;
}@ReactMethod
public void removeListeners(Integer count) {listenerCount -= count;if (listenerCount == 0) {// Remove upstream listeners， stop unnecessary background tasks}
}
...
WritableMap params = Arguments.createMap();
params.putString("eventProperty"， "someValue");
...
sendEvent(reactContext， "EventReminder"， params);

react-native的代码：

import {NativeEventEmitter， NativeModules} from 'react-native';
...
useEffect(() => {const eventEmitter = new NativeEventEmitter(NativeModules.ToastExample);let eventListener = eventEmitter.addListener('EventReminder'， event => {console.log(event.eventProperty) // "someValue"});// Removes the listener once unmountedreturn () => {eventListener.remove();};}， []);

查看全文

http://www.mrgr.cn/news/28831.html