React Native 是 Facebook 推出的一款跨平台移动应用框架，允许开发者使用 JavaScript 和 React 的语法进行开发，生成同时兼容 iOS 和 Android 两个平台的原生应用程序。然而，在实际开发过程中，我们可能会需要与 iOS 原生代码进行交互，例如调用 iOS 的特定功能或使用 iOS 原生的 UI 控件。因此，本文将介绍 React Native 与 iOS Native 通信的几种方式。
1. Native Modules
Native Modules 是一种在 JavaScript 和原生代码之间实现通信的桥梁。React Native 提供了一些内置的 Native Modules，例如用于访问设备硬件的 CameraRoll 模块和用于在 iOS 上播放视频的 Video 模块。开发者也可以创建自己的 Native Modules，使得 JavaScript 和原生代码之间可以调用相应的接口。
保持接口一致性是 Native Modules 的重要性质。以 iOS 平台为例，开发者需要创建一个继承自 NSObject 的类，然后声明该类所公开的方法和属性。这些方法和属性必须按照一定规则的方式进行命名和定义，以确保 JavaScript 代码可以正确地引用和调用它们。一旦定义好了 Native Module，开发者就可以在 JavaScript 端调用 Native Module 的方法，而 Native Module 也可以通过一个回调函数将结果返回给 JavaScript。
以调用 iOS 原生的 UIAlertView 控件为例，首先需要在 iOS 平台上创建 Native Module：
-- -------------------- ---- -------
-- --------------------
------- -------------------------
---------- ------------------ - -------- -----------------
----
-- --------------------
------- ----------------------
------- ---------------
--------------- ------------------
--------------------
------------------------------------- ------- ----------------- --------- ---------------- --------- ------------------------------------------
-
----------------- ---------------- - ------------------ ------------------------------ --------------- --------------------------------------------
--- --------- ------- -- -------- -
------------- ------- - -------------- ---------------------- ------------------------------- ----------------------- - -------- ------- -
-----------------------------
---
---------------- ------------------
-
---------------- ------------------- - -------------- ------------------------------------------------------
------------------- ------------------------------------- ------------ ----------------
-
----在 JavaScript 端，可以使用 Native Modules 调用该 Native Module 的 showAlert 方法：
import { NativeModules } from 'react-native';
const MyAlertViewManager = NativeModules.MyAlertViewManager;
MyAlertViewManager.showAlert('Title', 'Message', ['Option 1', 'Option 2'], (result) => {
console.log(result);
})2. Native UI 组件
如果需要使用 iOS 原生的 UI 组件，例如 UIPickerView 或 UISlider，可以通过创建 React Native 的 Native UI 组件实现。Native UI 组件是 React Native 框架内置的一个 API，它允许开发者创建与 React Native 具有相同外观和行为的原生界面组件。Native UI 组件的内部实现方式其实是调用了 iOS 原生的组件，因此可以用来展示 iOS 原生的界面风格和特效。
类似于 Native Modules，开发者需要在 iOS 平台上创建 Native UI 组件，然后将其注册到 React Native 中。这个过程需要遵循一定的规则，例如组件必须继承自 UIView，必须实现 RCTComponentProtocol 协议，并且需要以 XXManager.js 的文件名形式创建对应的 JavaScript Wrapper。创建完成后，在 JavaScript 中可以像使用其他 React Native 组件一样使用 Native UI 组件。
以一个简单的 iOS 原生的 UILabel 组件为例，首先需要在 iOS 平台上创建 Native UI 组件：
-- -------------------- ---- ------- -- --------- ------- ---------------------- ---------- ------- - ------- ---- -- --------- ------- ----------- --------------- ------- ----
然后创建对应的 JavaScript Wrapper：
import { requireNativeComponent } from 'react-native';
export default requireNativeComponent('MyLabel');在 JavaScript 中，就可以像使用其他 React Native 组件一样使用 MyLabel 组件了：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ ------- ---- ------------
------ ------- -------- ----- -
------ -
------
-------- ----------- ------- --
-------
--
-3. Bridge Events
Bridge Events 是一种 React Native 内置的机制，允许 JavaScript 和 Native 之间简单的单向通信。Bridge Events 可以被视为一种单向的消息传递机制，其中 JavaScript 端发送事件，而 Native 端监听和处理这些事件。当事件被触发时，Native 端可以执行相应的操作，例如更新 UI 或调用 Native Module。
事件的定义和传递在 JavaScript 端完成。创建 Bridge Event 需要使用 RCTEventEmitter 类，其可以在 JavaScript 和 Native 之间通信。在 iOS 平台上，开发者需要创建一个遵守 RCTEventEmitter 协议的类，并在类中添加对应的事件处理函数。事件处理函数的参数将包含事件的名称和传递的数据。然后，在 JavaScript 中，可以使用 NativeModules 来访问此类的实例方法，利用该方法发送事件。
以一个简单的点击事件为例，首先创建 Native 事件类：
-- -------------------- ---- -------
-- --------------
------- ------------------------
---------- ------------ - --------------
----
-- --------------
------- ----------------
--------------- ------------
--------------------
- ------- ------
-
-------- ------- - --------- -----------------------------------
------- ---------------- ---- -------------------------------
------- -------------- -------------------------------- ----------------------------------------------
------ -------
-
- ----------------------------- --------
-
------------ ---------- - --
----------- ------- ---- -----
--
----- --------------------------------------- ----------------
-
- ----------------- -- -----------------
-
------ -------------------------
-
----然后在 JavaScript 中，可以订阅该事件并响应事件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ------------------- ------------- - ---- ---------------
----- ------------ - ---------------------------
------ ------- -------- ----- -
----- --------- ----------- - -------------------
------------------ -- -
----- ------------ - --- ---------------------------------
----- ------------ - ---------------------------------------------- --------- -- -
------------------------------
-----------------------
---
------ -- -- -
----------------------
-
-- ----
------ -
------
----------------------
-------
--
-总结
本文介绍了三种 React Native 与 iOS Native 通信的方式：Native Modules、Native UI 组件和 Bridge Events。Native Modules 允许 Native 代码和 JavaScript 之间的双向通信，可以用于调用 iOS 特定的功能或访问硬件设备。Native UI 组件将 iOS 原生界面控件集成进 React Native 应用中，可以实现与 iOS 原生外观一致的 UI 风格和特效。Bridge Events 实现了简单的单向通信机制，适用于 Native 端执行 JavaScript 端的简单任务或回调。
尽管这些方式各有优缺点， React Native 依然是一种强大而灵活的跨平台框架，它可以使得开发者使用简单、一致的语言和技术栈，在 iOS 和 Android 平台上快速构建高质量的原生应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b24a8348841e9894e8d992