React Native 中如何调用 Native Modules？

推荐答案

在 React Native 中调用 Native Modules 的步骤如下：

1. 创建 Native Module：

   • 对于 iOS，使用 Objective-C 或 Swift 创建一个类，并实现 RCTBridgeModule 协议。
   • 对于 Android，使用 Java 或 Kotlin 创建一个类，并继承 ReactContextBaseJavaModule。

2. 注册 Native Module：

   • 对于 iOS，在 RCT_EXPORT_MODULE() 宏中注册模块。
   • 对于 Android，在 ReactPackage 中注册模块。

3. 暴露方法：

   • 对于 iOS，使用 RCT_EXPORT_METHOD() 宏暴露方法。
   • 对于 Android，使用 @ReactMethod 注解暴露方法。

4. 在 JavaScript 中调用 Native Module：

   • 使用 NativeModules 对象来调用暴露的 Native 方法。

本题详细解读

1. 创建 Native Module

iOS

在 iOS 中，创建一个新的 Objective-C 或 Swift 类，并实现 RCTBridgeModule 协议。例如：

-- -------------------- ---- -------
------- -------------------------

---------- -------------- - -------- -----------------
----

--------------- --------------

--------------------

--------------------------------------- ---------- -
  ----------------- ------ - ------------------ ----------------------------------- --------------- --------------------------------------------
  ------------- --------- - -------------- --------------------- ------------------------------- -------------
  ------ --------------------
  --------------- ----------------------------------------------- --------------------------- ------------ ----------------
-

----

Android

在 Android 中，创建一个新的 Java 或 Kotlin 类，并继承 ReactContextBaseJavaModule。例如：

-- -------------------- ---- -------
------- ----------

------ --------------------------------------------------
------ -----------------------------------------------------
------ --------------------------------------
------ ---------------------

------ ----- -------------- ------- -------------------------- -

  ------ -------------------------------------- ------------- -
    --------------------
  -

  ---------
  ------ ------ --------- -
    ------ -----------------
  -

  ------------
  ------ ---- ------------------ -------- -
    -------------------------------------------- -------- --------------------------
  -
-

2. 注册 Native Module

iOS

在 iOS 中，使用 RCT_EXPORT_MODULE() 宏来注册模块。这个宏会自动将模块注册到 React Native 的桥接器中。

Android

在 Android 中，需要在 ReactPackage 中注册模块。例如：

-- -------------------- ---- -------
------- ----------

------ --------------------------------
------ ---------------------------------------
------ --------------------------------------------------
------ -----------------------------------------

------ --------------------
------ ----------------------
------ ---------------

------ ----- ------------ ---------- ------------ -

  ---------
  ------ ----------------- ------------------------------------------ ------------- -
    ------ ------------------------
  -

  ---------
  ------ ------------------ ------------------------------------------- ------------- -
    ------------------ ------- - --- --------------
    --------------- ------------------------------
    ------ --------
  -
-

然后在 MainApplication.java 中注册这个 ReactPackage：

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new MyAppPackage()
  );
}

3. 暴露方法

iOS

在 iOS 中，使用 RCT_EXPORT_METHOD() 宏来暴露方法。这个方法会将 Objective-C 或 Swift 方法暴露给 JavaScript。

Android

在 Android 中，使用 @ReactMethod 注解来暴露方法。这个注解会将 Java 或 Kotlin 方法暴露给 JavaScript。

4. 在 JavaScript 中调用 Native Module

在 JavaScript 中，使用 NativeModules 对象来调用暴露的 Native 方法。例如：

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.showMessage('Hello from JavaScript!');

通过以上步骤，你可以在 React Native 中成功调用 Native Modules。