React Native 是一款具有高度可复用性的应用程序开发框架，它能够自动将代码编译成本地平台的组件。同时，React Native 提供了大量的原生组件，以及与原生平台进行通信。然而，有时候我们还需要使用原生模块，以实现更高级别的功能和操作。本文将介绍如何在 React Native 中使用原生模块。
步骤
在 React Native 中使用原生模块的步骤如下:
1. 创建原生模块
首先，我们需要创建一个原生模块。在 iOS 中，我们需要创建一个 Objective-C 文件，并继承 RCTBridgeModule。在 Android 中，我们需要创建一个 Java 类，并实现 ReactContextBaseJavaModule。这些类负责将 JavaScript Core 转换成 Android 或 iOS 的本地代码。
例如，下面是一个 iOS 的 Objective-C 实现类的示例代码：
-- ---------- ------- ------------------------- ---------- -------- - -------- ----------------- ---- -- ---------- ------- ------------ --------------- -------- -------------------- --------------------------------------- -------- - -- ------ - ----
2. 导入原生模块
在 JavaScript 代码中，我们需要导入原生模块，并将其绑定到一个常量或变量上。在 React Native 中，可以使用 NativeModules 模块来导入原生模块。
例如，在以下代码中，我们将 MyModule 模块导入为 NativeModules.MyModule：
------ - ------------- - ---- --------------- ----- - -------- - - --------------
3. 使用原生模块
一旦将原生模块绑定到一个变量上，就可以在 JavaScript 代码中使用它了。在下面的代码中，我们使用导入的 MyModule 模块中的 doSomething 方法，对输入进行操作：
--------------------------- --------
示例代码
考虑一个简单的示例，我们想要在 React Native 应用程序中使用原生的颜色选择器。为此，我们可以实现一个名为 ColorPicker 的原生模块，并将其导入到我们的 JavaScript 代码中。
以下是一个简单的 iOS 实现（使用 Objective-C）：
-- -------------
------- -------------------------
------- ---------------
---------- ----------- - -------- -----------------
----
-- -------------
------- ---------------
--------------- -----------
--------------------
------------------------------------------------------ --------------------------------------- -
-- -----------
---------------- --------------- - ------------------ ------ ------
----------------------------------- - -------- ------------
-- ---------
--------------------------- ------------ - ----------------------------- ------ ------
------------ ----------------------
-- --------------
--------------- --------------------------------- ------------ ----------------
-- --
------------------------------- - --------- ------- -
-------- ---------- - ----- --------------------------
-------------------
--
------------------------------ - ---------- ------ -------- --------- ------- ------- -
------------ -------- -------
--
-
- --------- ----------------------------- ------- -
------- -- -- -- --
------ --------- -------- ------- ----------
------ --------- ---------------------------------- ------- - ----- ------- - ----- ------- - ------
-
- ----------------------------- -
------ --------------------------
-
----在这个示例中，我们实现了一个名为 ColorPicker 的原生模块，并将其导出为 NativeModules.ColorPicker。我们定义了一个名为 show 的方法，在调用时，它会创建一个新的 UIViewController 并在其中呈现 UIColorPickerViewController。在 show 方法中，我们将 Promise 对象传递给我们的 UIColorPickerViewController，以使回调正确执行。
因为 UIColorPickerViewController 需要在主线程上运行，所以我们还提供了一个 methodQueue 方法，以确保它在主线程上运行。
在 JavaScript 代码中，我们将 ColorPicker 模块导出为 NativeModules.ColorPicker。然后，我们可以使用它的 show 方法来打开颜色选择器。在选择颜色后，颜色选择器会调用回调并返回所选颜色的十六进制值。
以下是在 JavaScript 中使用 ColorPicker 模块的示例代码：
------ - ----- ------- ---- - ---- ---------------
------ - ------------- - ---- ---------------
------ ------ - -------- - ---- --------
----- - ----------- - - --------------
----- ------------------ - -- -- -
----- ------- --------- - --------------------
----- --------------- - ----- -- -- -
--- -
----- ------ - ----- -------------------
-----------------
- ----- ----- -
------------------
-
--
------ -
------
------- ------------- ------ ------------------------- --
----- -------- --------- --- ---------- -- ----------- ------ --------------
----- -------- ---------- --- ------- --- ------ --- ---------------- ----- -- --
-------
--
--
------ ------- -------------------在这个示例代码中，我们导入了名为 ColorPicker 的模块，并将它绑定到常量 NativeModules.ColorPicker 上。在组件的 render 方法中，我们渲染了一个 Button，并将其点击事件与打开颜色选择器的 openColorPicker 方法关联。当颜色选择器调用回调函数时，回调函数将所选颜色的十六进制值更新到状态 color 中，并显示所选颜色的小方块。
结论
本文介绍了如何在 React Native 中使用原生模块，并提供了一个简单的示例代码。我们希望这篇文章能够帮助您更好地理解如何在 React Native 中使用原生代码，并为您的应用程序添加更高级别的功能和操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fcf64f4471362601752503