跳到主要内容

Android 原生模块

信息

原生模块和原生组件是我们旧版架构使用的稳定技术。当新架构稳定后，它们将在未来被弃用。新架构使用 Turbo 原生模块 和 Fabric 原生组件 来实现类似的结果。

欢迎来到 Android 原生模块。请首先阅读 原生模块简介，了解什么是原生模块。

创建一个日历原生模块​

在以下指南中，您将创建一个原生模块 CalendarModule，它允许您从 JavaScript 访问 Android 的日历 API。最后，您将能够从 JavaScript 调用 CalendarModule.createCalendarEvent('Dinner Party', 'My House');，从而调用一个创建日历事件的 Java/Kotlin 方法。

设置​

首先，在 Android Studio 中打开 React Native 应用程序中的 Android 项目。您可以在 React Native 应用程序中的此处找到您的 Android 项目

Image of opening up an Android project within a React Native app inside of Android Studio.
您可以找到 Android 项目的位置的图片

我们建议使用 Android Studio 来编写您的原生代码。Android Studio 是一个专为 Android 开发而构建的 IDE，使用它可以帮助您快速解决代码语法错误等小问题。

我们还建议启用 Gradle Daemon，以在您迭代 Java/Kotlin 代码时加快构建速度。

创建一个自定义原生模块文件​

第一步是在 android/app/src/main/java/com/your-app-name/ 文件夹（Kotlin 和 Java 的文件夹相同）中创建 (CalendarModule.java 或 CalendarModule.kt) Java/Kotlin 文件。此 Java/Kotlin 文件将包含您的原生模块 Java/Kotlin 类。

Image of adding a class called CalendarModule.java within the Android Studio.
如何添加 CalendarModuleClass 的图片

然后添加以下内容

java
package com.your-apps-package-name; // replace your-apps-package-name with your app’s package name
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
import java.util.HashMap;

public class CalendarModule extends ReactContextBaseJavaModule {
   CalendarModule(ReactApplicationContext context) {
       super(context);
   }
}

如您所见，您的 CalendarModule 类扩展了 ReactContextBaseJavaModule 类。对于 Android，Java/Kotlin 原生模块编写为扩展 ReactContextBaseJavaModule 并实现 JavaScript 所需功能的类。

值得注意的是，从技术上讲，Java/Kotlin 类只需要扩展 BaseJavaModule 类或实现 NativeModule 接口，即可被 React Native 视为原生模块。

但是，我们建议您使用 ReactContextBaseJavaModule，如上所示。ReactContextBaseJavaModule 允许访问 ReactApplicationContext (RAC)，这对于需要 hook 到 activity 生命周期方法的原生模块非常有用。使用 ReactContextBaseJavaModule 也将使您在未来更容易使您的原生模块类型安全。对于原生模块类型安全（将在未来的版本中推出），React Native 会查看每个原生模块的 JavaScript 规范，并生成一个扩展 ReactContextBaseJavaModule 的抽象基类。

模块名称​

Android 中的所有 Java/Kotlin 原生模块都需要实现 getName() 方法。此方法返回一个字符串，表示原生模块的名称。然后可以使用其名称在 JavaScript 中访问原生模块。例如，在下面的代码片段中，getName() 返回 "CalendarModule"。

java
// add to CalendarModule.java
@Override
public String getName() {
   return "CalendarModule";
}

然后可以在 JS 中像这样访问原生模块

tsx
const {CalendarModule} = ReactNative.NativeModules;

向 JavaScript 导出原生方法​

接下来，您需要在您的原生模块中添加一个方法，该方法将创建日历事件，并且可以在 JavaScript 中调用。所有旨在从 JavaScript 调用的原生模块方法都必须使用 @ReactMethod 注解。

为 CalendarModule 设置一个方法 createCalendarEvent()，可以通过 CalendarModule.createCalendarEvent() 在 JS 中调用。现在，该方法将接收一个名称和位置作为字符串。参数类型选项将在稍后介绍。

java
@ReactMethod
public void createCalendarEvent(String name, String location) {
}

在该方法中添加一个调试日志，以确认当您从应用程序调用它时，它已被调用。下面是如何从 Android util 包导入和使用 Log 类的示例

java
import android.util.Log;

@ReactMethod
public void createCalendarEvent(String name, String location) {
   Log.d("CalendarModule", "Create event called with name: " + name
   + " and location: " + location);
}

完成原生模块的实现并在 JavaScript 中 hook 它之后，您可以按照 这些步骤 查看来自您的应用程序的日志。

同步方法​

您可以将 isBlockingSynchronousMethod = true 传递给原生方法，将其标记为同步方法。

java
@ReactMethod(isBlockingSynchronousMethod = true)

目前，我们不建议这样做，因为同步调用方法可能会对性能产生很大的影响，并为您的原生模块引入与线程相关的错误。此外，请注意，如果您选择启用 isBlockingSynchronousMethod，您的应用程序将无法再使用 Google Chrome 调试器。这是因为同步方法需要 JS VM 与应用程序共享内存。对于 Google Chrome 调试器，React Native 在 Google Chrome 中的 JS VM 内运行，并通过 WebSockets 与移动设备异步通信。

注册模块（Android 特有）​

一旦编写了原生模块，就需要将其注册到 React Native。为了做到这一点，您需要将您的原生模块添加到 ReactPackage，并将 ReactPackage 注册到 React Native。在初始化期间，React Native 将循环遍历所有包，并为每个 ReactPackage 注册其中的每个原生模块。

React Native 在 ReactPackage 上调用方法 createNativeModules()，以获取要注册的原生模块列表。对于 Android，如果模块未在 createNativeModules 中实例化和返回，则它将无法从 JavaScript 中使用。

要将您的原生模块添加到 ReactPackage，首先创建一个新的 Java/Kotlin 类，名为 (MyAppPackage.java 或 MyAppPackage.kt)，它在 android/app/src/main/java/com/your-app-name/ 文件夹中实现 ReactPackage

然后添加以下内容

java
package com.your-app-name; // replace your-app-name with your app’s name
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyAppPackage implements ReactPackage {

   @Override
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
       return Collections.emptyList();
   }

   @Override
   public List<NativeModule> createNativeModules(
           ReactApplicationContext reactContext) {
       List<NativeModule> modules = new ArrayList<>();

       modules.add(new CalendarModule(reactContext));

       return modules;
   }

}

此文件导入您创建的原生模块 CalendarModule。然后，它在 createNativeModules() 函数中实例化 CalendarModule，并将其作为 NativeModules 列表返回以进行注册。如果您在以后添加更多原生模块，您也可以实例化它们并将它们添加到此处返回的列表中。

值得注意的是，这种注册原生模块的方式会在应用程序启动时急切地初始化所有原生模块，这会增加应用程序的启动时间。您可以使用 TurboReactPackage 作为替代方案。TurboReactPackage 不是返回实例化的原生模块对象列表的 createNativeModules，而是实现了一个 getModule(String name, ReactApplicationContext rac) 方法，该方法在需要时创建原生模块对象。TurboReactPackage 目前实现起来有点复杂。除了实现 getModule() 方法之外，您还必须实现 getReactModuleInfoProvider() 方法，该方法返回包可以实例化的所有原生模块的列表，以及一个实例化它们的函数，例如 此处。同样，使用 TurboReactPackage 将使您的应用程序具有更快的启动时间，但目前编写起来有点麻烦。因此，如果您选择使用 TurboReactPackages，请谨慎行事。

要注册 CalendarModule 包，您必须将 MyAppPackage 添加到 ReactNativeHost 的 getPackages() 方法中返回的包列表中。打开您的 MainApplication.java 或 MainApplication.kt 文件，该文件可以在以下路径中找到：android/app/src/main/java/com/your-app-name/。

找到 ReactNativeHost 的 getPackages() 方法，并将您的包添加到 getPackages() 返回的包列表中

java
@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    packages.add(new MyAppPackage());
    return packages;
}

您现在已成功注册了您的 Android 原生模块！

测试您构建的内容​

此时，您已经在 Android 中设置了原生模块的基本框架。通过访问原生模块并在 JavaScript 中调用其导出的方法来测试它。

在您的应用程序中找到您想要添加对原生模块的 createCalendarEvent() 方法调用的位置。下面是一个组件 NewModuleButton 的示例，您可以将其添加到您的应用程序中。您可以在 NewModuleButton 的 onPress() 函数中调用原生模块。

tsx
import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

为了从 JavaScript 访问您的原生模块，您需要首先从 React Native 导入 NativeModules

tsx
import {NativeModules} from 'react-native';

然后您可以从 NativeModules 访问 CalendarModule 原生模块。

tsx
const {CalendarModule} = NativeModules;

现在您已经有了 CalendarModule 原生模块，您可以调用您的原生方法 createCalendarEvent()。下面它被添加到 NewModuleButton 中的 onPress() 方法中

tsx
const onPress = () => {
  CalendarModule.createCalendarEvent('testName', 'testLocation');
};

最后一步是重建 React Native 应用程序，以便您可以使用最新的原生代码（包含您的新原生模块！）。在您的命令行中，React Native 应用程序所在的位置，运行以下命令

shell
npm run android

在迭代时构建​

当您完成这些指南并在您的原生模块上迭代时，您将需要对您的应用程序进行原生重建，以从 JavaScript 访问您的最新更改。这是因为您正在编写的代码位于应用程序的原生部分。虽然 React Native 的 metro bundler 可以监视 JavaScript 中的更改并为您动态重建，但它不会对原生代码这样做。因此，如果您想测试最新的原生更改，您需要使用上述命令进行重建。

回顾✨​

您现在应该能够在应用程序中调用原生模块上的 createCalendarEvent() 方法。在我们的示例中，这通过按下 NewModuleButton 来发生。您可以通过查看在 createCalendarEvent() 方法中设置的日志来确认这一点。您可以按照 这些步骤 查看您应用程序中的 ADB 日志。然后您应该能够搜索您的 Log.d 消息（在我们的示例中为“使用名称：testName 和位置：testLocation 调用创建事件”），并看到每次调用原生模块方法时都会记录您的消息。

Image of logs.
Android Studio 中的 ADB 日志图片

此时，您已经创建了一个 Android 原生模块，并在您的 React Native 应用程序中从 JavaScript 调用了它的原生方法。您可以继续阅读以了解更多关于原生模块方法可用的参数类型以及如何设置回调和 Promise 的信息。

超越日历原生模块​

更好的原生模块导出​

像上面那样通过从 NativeModules 中拉取来导入您的原生模块有点笨拙。

为了避免您的原生模块的使用者每次想要访问您的原生模块时都需要这样做，您可以为该模块创建一个 JavaScript 包装器。创建一个名为 CalendarModule.js 的新 JavaScript 文件，内容如下

tsx
/**
* This exposes the native CalendarModule module as a JS module. This has a
* function 'createCalendarEvent' which takes the following parameters:

* 1. String name: A string representing the name of the event
* 2. String location: A string representing the location of the event
*/
import {NativeModules} from 'react-native';
const {CalendarModule} = NativeModules;
export default CalendarModule;

此 JavaScript 文件也成为了您添加任何 JavaScript 端功能的良好位置。例如，如果您使用像 TypeScript 这样的类型系统，您可以在此处为您的原生模块添加类型注解。虽然 React Native 尚不支持原生到 JS 的类型安全，但您的所有 JS 代码都将是类型安全的。这样做也将使您更容易在将来切换到类型安全的原生模块。下面是一个向 CalendarModule 添加类型安全的示例

tsx
/**
 * This exposes the native CalendarModule module as a JS module. This has a
 * function 'createCalendarEvent' which takes the following parameters:
 *
 * 1. String name: A string representing the name of the event
 * 2. String location: A string representing the location of the event
 */
import {NativeModules} from 'react-native';
const {CalendarModule} = NativeModules;
interface CalendarInterface {
  createCalendarEvent(name: string, location: string): void;
}
export default CalendarModule as CalendarInterface;

在您的其他 JavaScript 文件中，您可以访问原生模块并像这样调用其方法

tsx
import CalendarModule from './CalendarModule';
CalendarModule.createCalendarEvent('foo', 'bar');

这假设您导入 CalendarModule 的位置与 CalendarModule.js 在同一层级结构中。请根据需要更新相对导入。

参数类型​

当在 JavaScript 中调用原生模块方法时，React Native 会将参数从 JS 对象转换为其 Java/Kotlin 对象类似物。因此，例如，如果您的 Java 原生模块方法接受一个 double，则在 JS 中您需要使用一个数字调用该方法。React Native 将为您处理转换。下面是原生模块方法支持的参数类型及其映射到的 JavaScript 等效项的列表。

JavaKotlinJavaScript
BooleanBoolean?boolean
booleanboolean
DoubleDouble?number
doublenumber
StringStringstring
CallbackCallbackFunction
PromisePromisePromise
ReadableMapReadableMapObject
ReadableArrayReadableArrayArray

以下类型当前受支持，但在 TurboModules 中将不受支持。请避免使用它们

  • Integer Java/Kotlin -> ?number
  • Float Java/Kotlin -> ?number
  • int Java -> number
  • float Java -> number

对于上面未列出的参数类型，您将需要自己处理转换。例如，在 Android 中，Date 转换不被开箱即用地支持。您可以像这样在原生方法中自己处理到 Date 类型的转换

java
    String dateFormat = "yyyy-MM-dd";
    SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);
    Calendar eStartDate = Calendar.getInstance();
    try {
        eStartDate.setTime(sdf.parse(startDate));
    }

导出常量​

原生模块可以通过实现原生方法 getConstants() 来导出常量，该方法在 JS 中可用。下面您将实现 getConstants() 并返回一个 Map，其中包含您可以在 JavaScript 中访问的 DEFAULT_EVENT_NAME 常量

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

然后可以通过在 JS 中在原生模块上调用 getConstants 来访问常量

tsx
const {DEFAULT_EVENT_NAME} = CalendarModule.getConstants();
console.log(DEFAULT_EVENT_NAME);

从技术上讲，可以直接从原生模块对象访问在 getConstants() 中导出的常量。这在 TurboModules 中将不再受支持，因此我们鼓励社区切换到上述方法，以避免将来进行必要的迁移。

目前，常量仅在初始化时导出，因此如果您在运行时更改 getConstants 值，它不会影响 JavaScript 环境。这将在 Turbomodules 中发生变化。使用 Turbomodules，getConstants() 将成为一个常规的原生模块方法，并且每次调用都将命中原生端。

回调​

原生模块还支持一种独特的参数：回调。回调用于将数据从 Java/Kotlin 传递到 JavaScript 以进行异步方法。它们也可以用于从原生端异步执行 JavaScript。

为了创建一个带有回调的原生模块方法，首先导入 Callback 接口，然后在您的原生模块方法中添加一个 Callback 类型的新参数。回调参数有一些细微差别，这些差别很快将在 TurboModules 中消除。首先，您的函数参数中只能有两个回调 - 一个 successCallback 和一个 failureCallback。此外，原生模块方法调用的最后一个参数（如果是函数）被视为 successCallback，而原生模块方法调用的倒数第二个参数（如果是函数）被视为 failure callback。

java
import com.facebook.react.bridge.Callback;

@ReactMethod
public void createCalendarEvent(String name, String location, Callback callBack) {
}

您可以在 Java/Kotlin 方法中调用回调，提供您想要传递给 JavaScript 的任何数据。请注意，您只能将可序列化的数据从原生代码传递到 JavaScript。如果您需要传回原生对象，您可以使用 WriteableMaps，如果您需要使用集合，请使用 WritableArrays。同样重要的是要强调，回调不会在原生函数完成后立即调用。下面，在早期调用中创建的事件的 ID 被传递给回调。

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

然后可以使用 JavaScript 访问此方法

tsx
const onPress = () => {
  CalendarModule.createCalendarEvent(
    'Party',
    'My House',
    eventId => {
      console.log(`Created a new event with id ${eventId}`);
    },
  );
};

另一个需要注意的重要细节是，原生模块方法只能调用一个回调，一次。这意味着您可以调用成功回调或失败回调，但不能同时调用两者，并且每个回调最多只能调用一次。但是，原生模块可以存储回调并在以后调用它。

使用回调进行错误处理有两种方法。第一种是遵循 Node 的约定，并将传递给回调的第一个参数视为错误对象。

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

在 JavaScript 中，您可以检查第一个参数以查看是否传递了错误

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

另一种选择是使用 onSuccess 和 onFailure 回调

java
@ReactMethod
public void createCalendarEvent(String name, String location, Callback myFailureCallback, Callback mySuccessCallback) {
}

然后在 JavaScript 中，您可以为错误和成功响应添加单独的回调

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

Promise​

原生模块还可以实现 Promise，这可以简化您的 JavaScript，尤其是在使用 ES2016 的 async/await 语法时。当原生模块 Java/Kotlin 方法的最后一个参数是 Promise 时，其对应的 JS 方法将返回一个 JS Promise 对象。

将上述代码重构为使用 Promise 而不是回调，如下所示

java
import com.facebook.react.bridge.Promise;

@ReactMethod
public void createCalendarEvent(String name, String location, Promise promise) {
    try {
        Integer eventId = ...
        promise.resolve(eventId);
    } catch(Exception e) {
        promise.reject("Create Event Error", e);
    }
}

与回调类似，原生模块方法可以 reject 或 resolve 一个 Promise（但不能同时进行），并且最多可以执行一次。这意味着您可以调用成功回调或失败回调，但不能同时调用两者，并且每个回调最多只能调用一次。但是，原生模块可以存储回调并在以后调用它。

此方法的 JavaScript 对等方法返回一个 Promise。这意味着您可以在 async 函数中使用 await 关键字来调用它并等待其结果

tsx
const onSubmit = async () => {
  try {
    const eventId = await CalendarModule.createCalendarEvent(
      'Party',
      'My House',
    );
    console.log(`Created a new event with id ${eventId}`);
  } catch (e) {
    console.error(e);
  }
};

reject 方法接受以下参数的不同组合

java
String code, String message, WritableMap userInfo, Throwable throwable

有关更多详细信息，您可以在 此处 找到 Promise.java 接口。如果未提供 userInfo，ReactNative 将其设置为 null。对于其余参数，React Native 将使用默认值。message 参数提供了错误 message，该消息显示在错误调用堆栈的顶部。下面是在 JavaScript 中显示的错误消息示例，该消息来自 Java/Kotlin 中的以下 reject 调用。

Java/Kotlin reject 调用

java
promise.reject("Create Event error", "Error parsing date", e);

当 Promise 被 reject 时，React Native 应用程序中的错误消息

Image of error message in React Native app.
错误消息图片

向 JavaScript 发送事件​

原生模块可以在不被直接调用的情况下向 JavaScript 发出事件信号。例如，您可能想要向 JavaScript 发出提醒，即来自原生 Android 日历应用程序的日历事件即将发生。最简单的方法是使用 RCTDeviceEventEmitter，可以从 ReactContext 中获取它，如下面的代码片段所示。

java
...
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);

然后，JavaScript 模块可以通过在 NativeEventEmitter 类上使用 addListener 来注册接收事件。

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

从 startActivityForResult 获取 Activity 结果​

如果您想从使用 startActivityForResult 启动的 activity 中获取结果，您需要监听 onActivityResult。为此，您必须扩展 BaseActivityEventListener 或实现 ActivityEventListener。前者是首选，因为它对 API 更改更具弹性。然后，您需要在模块的构造函数中注册监听器，如下所示

java
reactContext.addActivityEventListener(mActivityResultListener);

现在您可以通过实现以下方法来监听 onActivityResult

java
@Override
public void onActivityResult(
 final Activity activity,
 final int requestCode,
 final int resultCode,
 final Intent intent) {
 // Your logic here
}

让我们实现一个基本的图像选择器来演示这一点。图像选择器将向 JavaScript 公开方法 pickImage，该方法在调用时将返回图像的路径。

kotlin
public class ImagePickerModule extends ReactContextBaseJavaModule {

  private static final int IMAGE_PICKER_REQUEST = 1;
  private static final String E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST";
  private static final String E_PICKER_CANCELLED = "E_PICKER_CANCELLED";
  private static final String E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER";
  private static final String E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND";

  private Promise mPickerPromise;

  private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {

    @Override
    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
      if (requestCode == IMAGE_PICKER_REQUEST) {
        if (mPickerPromise != null) {
          if (resultCode == Activity.RESULT_CANCELED) {
            mPickerPromise.reject(E_PICKER_CANCELLED, "Image picker was cancelled");
          } else if (resultCode == Activity.RESULT_OK) {
            Uri uri = intent.getData();

            if (uri == null) {
              mPickerPromise.reject(E_NO_IMAGE_DATA_FOUND, "No image data found");
            } else {
              mPickerPromise.resolve(uri.toString());
            }
          }

          mPickerPromise = null;
        }
      }
    }
  };

  ImagePickerModule(ReactApplicationContext reactContext) {
    super(reactContext);

    // Add the listener for `onActivityResult`
    reactContext.addActivityEventListener(mActivityEventListener);
  }

  @Override
  public String getName() {
    return "ImagePickerModule";
  }

  @ReactMethod
  public void pickImage(final Promise promise) {
    Activity currentActivity = getCurrentActivity();

    if (currentActivity == null) {
      promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist");
      return;
    }

    // Store the promise to resolve/reject when picker returns data
    mPickerPromise = promise;

    try {
      final Intent galleryIntent = new Intent(Intent.ACTION_PICK);

      galleryIntent.setType("image/*");

      final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image");

      currentActivity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST);
    } catch (Exception e) {
      mPickerPromise.reject(E_FAILED_TO_SHOW_PICKER, e);
      mPickerPromise = null;
    }
  }
}

监听生命周期事件​

监听 activity 的生命周期事件（如 onResume、onPause 等）与 ActivityEventListener 的实现方式非常相似。模块必须实现 LifecycleEventListener。然后，您需要在模块的构造函数中注册一个监听器，如下所示

java
reactContext.addLifecycleEventListener(this);

现在您可以通过实现以下方法来监听 activity 的生命周期事件

java
@Override
public void onHostResume() {
   // Activity `onResume`
}
@Override
public void onHostPause() {
   // Activity `onPause`
}
@Override
public void onHostDestroy() {
   // Activity `onDestroy`
}

线程​

到目前为止，在 Android 上，所有原生模块异步方法都在一个线程上执行。原生模块不应假设它们被调用的线程是什么，因为当前的分配可能会在未来发生变化。如果需要阻塞调用，则应将繁重的工作分派到内部管理的 worker 线程，并从那里分发任何回调。