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

react-native和原生android的交互

article 2024/11/15 9:08:09

连接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 unmounted
    return () => {
      eventListener.remove();
    };
  }， []);

查看全文

http://www.kler.cn/a/317547.html