-
连接react-native和原生android
- 可以参考我上一篇博客：react-native连接android原生模块-CSDN博客
- 这篇博客需要参考我的上一篇博客，下面的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 -
效果图：
- 在原生模块直接return相对应的数据，在android编写方法。
-
方式二：传入回调函数
- 原生模块还支持一种独特的参数类型:回调函数。回调函数用于将数据从 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
- 原生模块也可以实现Promise，使用它可以简化你的javascript代码，尤其是在使用ES2016的async/await语法时。当原生模块方法的最后一个参数为Promise时，对应的方法将返回一个JS Promise对象。
- 在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();};}， []);
- android编写：
