1. 连接react-native和原生android

    1. 可以参考我上一篇博客:react-native连接android原生模块-CSDN博客
    2. 这篇博客需要参考我的上一篇博客,下面的CalendarModule对象也是在上一篇博客里。
  2. 方式一:在android的方法直接return数据

    1. 在原生模块直接return相对应的数据,在android编写方法。
      @Override
      public Map<String, Object> getConstants() {
          final Map<String, Object> constants = new HashMap<>();
          constants.put("DEFAULT_EVENT_NAME", "New Event");
          return constants;
      }
    2. 这个方法编写在 CalendarModule 里面。

      react-native和原生android的交互-LMLPHP

    3. 在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
    4. 效果图:
      react-native和原生android的交互-LMLPHP

  3. 方式二:传入回调函数

    1. 原生模块还支持一种独特的参数类型:回调函数。回调函数用于将数据从 Java/Kotlin 异步传递到 JavaScript,同时也可用于从原生端异步执行 JavaScript 代码。
    2. 使用方法是react-native中编写方法 createCalendarEvent,传入回调方法。
      CalendarModule.createCalendarEvent(
        'testName',
        'testLocation',
        (error, eventId) => {
          if (error) {
            console.error(`Error found! ${error}`);
          }
          console.log(`event id ${eventId} returned`);
        },
      );
    3. 在android端编写触发回调。
      @ReactMethod(isBlockingSynchronousMethod = true)
      public void createCalendarEvent(String name, String location, Callback callBack) {
          Integer eventId = 123;
          callBack.invoke(null, eventId);
      }
    4. 触发的效果。
      react-native和原生android的交互-LMLPHP
  4. 方式三:使用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);
          }
      }
  5. 方式四:向 JavaScript 发送事件

    1. 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);
    2. 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();
          };
        }, []);
       
09-18 06:27