React Native 是一种流行的跨平台移动应用程序开发框架，它能够利用 JavaScript 和 React 构建本地应用程序界面。编写 React Native 应用程序的优势在于能够将同一份代码用于多个平台，这显著减少了重复的工作量，同时减轻了跨平台应用程序的开发负担。
然而，对于那些希望获得更好性能或需要与现有本地代码进行交互的开发者，React Native 还提供了与 Native Code（原生代码）的交互。这是开发高级应用程序必备技术之一，同时也是 React Native 架构最新版本中的一个核心部分。
Native Modules
React Native 允许开发人员编写本地模块，这意味着可以编写原生代码并将其包装为 React Native 可用的模块。这些模块可以接收和发送数据，同时可以在 React Native 应用程序中与 JavaScript 交互。
例如，一个应用程序可能需要使用硬件传感器，如加速度计和陀螺仪，来跟踪设备的运动。这就要求开发人员编写一些原生代码，以便能够访问硬件传感器，并将其数据传递给 JavaScript。此外，如果应用程序需要在模拟器上运行，则需要开发人员模拟传感器数据。通过将此代码封装在本地模块中，可以方便地将其链接到 React Native 应用程序中。
下面是一个示例本地模块，该模块在 React Native 中公开两个本地函数，用于“打开”和“关闭”应用程序中的网络连接：
-- -------------------- ---- -------
------ -----------------------------------
------ --------------------------------------------------
------ -----------------------------------------------------
------ --------------------------------------
------ ----- ----------------------- ------- -------------------------- -
------ ----------------------------------------------- ------------- -
--------------------
-
---------
------ ------ --------- -
------ --------------------
-
------------
------ ---- ---------------------------- ---- -------- ---------------- -------- -------------- -
--- -
-- ---- - ------- ----------
-------------------------
- ----- ---------- -- -
-------------------------------------
-
-
------------
------ ---- ------------------------------- ---------------- -------- -------------- -
--- -
-- ----- --- ------- ----------
-------------------------
- ----- ---------- -- -
-------------------------------------
-
-
-使用本地代码时的注意事项
当使用本地代码时，我们必须注意几个关键因素以确保程序正常运行。以下是一些需要注意的事项：
模块名称
在 React Native 中公开本地模块时，模块的名称必须与模块的实现类匹配：
public String getName() {
return "NetworkConnection";
}原生函数的类型
React Native 要求在注册原生函数时使用特定类型。在 React Native 0.60 以前的版本中，可以使用 ReactMethod 和 Callback 类来定义和公开原生函数，但是现在已更新为 @ReactMethod 和 Promise 类型。例如：
// Before
@ReactMethod
public void openNetworkConnection(String url, Callback successCallback, Callback errorCallback) { ... }
// After
@ReactMethod
public void openNetworkConnection(String url, Promise promise) { ... }线程
在 React Native 应用程序中，JavaScript 运行在一个单独的线程中，因此在执行长时间运行的操作时必须小心，以免阻塞 UI 线程。建议将长时间运行的操作放在独立的线程中执行。
iOS 和 Android 代码
在 React Native 应用程序中使用原生代码时，必须分别为 iOS 和 Android 编写代码。每个平台有不同的 API 和开发工具，因此在编写本地代码时必须注意与每个平台相关的细节。
结论
React Native 可以与本地代码和本地模块进行集成，从而提供更多的功能和更好的性能。使用本地代码时，必须注意代码的正确性、线程安全、平台的不同之处等问题。通过使用本地代码，开发人员可以利用 React Native 框架的优点，同时获得更高的灵活性和性能。
示例代码
以下是一个完整的 React Native 应用程序，其中包含一个本地模块，该模块执行网络连接操作。在此示例中，我们设置了一个简单的界面，当用户按下“连接”按钮时，我们打开网络连接并显示“Connection Opened”消息。当用户按下“关闭”按钮时，我们关闭连接并显示“Connection Closed”消息。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- ----- ----------------- ---- - ---- ---------------
------ ----------------- ---- ----------------------
------ ------- -------- ----- -
----- ------------- --------------- - ----------------
----- ------------------ - ----- -- -- -
--- -
----- ------------------------------------------
---------------------
- ----- ------- -
---------------------
-
--
----- --------------------- - ----- -- -- -
--- -
----- -------------------------------------------
----------------------
- ----- ------- -
---------------------
-
--
------ -
----- -------------------------
----- --------------------------------- - ----------- ------- - --- -------------------
----------------- --------------------- -----------------------------
----- ----------------------------------------
-------------------
----------------- --------------------- --------------------------------
----- -------------------------------------------
-------------------
-------
--
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
------ -
--------- ---
------------- ---
--
------- -
---------------- -------
-------- ---
------------- --
------------- ---
--
----------- -
------ --------
--------- ---
----------- -------
--
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677291286d66e0f9aadac760