react-native和原生android的交互

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 里面。

      

   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. 效果图：
      

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. 触发的效果。
      

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();
          };
        }， []);