React Native 是 Facebook 推出的一种基于 React 的原生移动应用框架。这个框架使得前端开发者能够使用 JavaScript 和 React 编写移动应用，而无需学习 iOS 或 Android 的原生开发语言。
然而，React Native 不能完全取代原生应用开发，因为有些功能需要使用原生代码才能实现。因此，原生与 React Native 的混合编程成为了一种常见的技术方案。本文将介绍如何进行 React Native 与原生混编，并给出示例代码。
iOS 原生与 React Native 混编
步骤一：创建 React Native 项目
首先，你需要创建一个 React Native 项目，可以使用以下命令：
react-native init MyProject
注意，如果你已经创建了 React Native 项目，跳过这一步即可。
步骤二：创建原生模块
接下来，你需要创建一个原生模块。可以使用以下命令：
cd MyProject/ios mkdir NativeModule cd NativeModule swift package init --type=library
这将创建一个名为 NativeModule 的文件夹，并在其中初始化一个 Swift 包。
步骤三：编辑原生模块
接下来，你需要编辑原生模块，使其可以被 React Native 调用。
首先，打开 Package.swift 文件，并添加以下代码：
-- -------------------- ---- -------
------ ------------------
--- ------- - --------
----- ---------------
--------- -
---------
----- ---------------
-------- ------------------
--
------------- -
--
-------- -
--------
----- ---------------
------------- ----
-
-然后，在 Sources 文件夹下创建一个名为 NativeBridge.swift 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ----------
------ -----
-------------------
----- ------------- -------- -
-----
---- ---------- -- --------- - -- --------- --------- ----------------------- -- ---- -
--- ------ - ------------ - ------------
------------------- --------
-
-代码中，我们定义了一个名为 NativeBridge 的类，在其中编写了一个名为 multiply 的函数，并使用 @objc 进行了注解，以便 React Native 可以调用它。
步骤四：将原生模块打包为静态库
接下来，你需要将原生模块打包为静态库，以便 React Native 可以在 iOS 项目中使用它。可以使用以下命令：
swift package generate-xcodeproj xcodebuild -project NativeModule.xcodeproj -scheme NativeModule -derivedDataPath build -sdk iphonesimulator14.4
这将生成 build/Build/Products/Debug-iphonesimulator/NativeModule.framework 文件。
步骤五：在 iOS 项目中使用原生模块
最后，你需要在 iOS 项目中使用原生模块。
首先，在 MyProject/ios 中创建一个名为 MyProject-Bridging-Header.h 的文件，并添加以下代码：
#import <React/RCTBridgeModule.h> @interface RCT_EXTERN_MODULE(NativeBridge, NSObject) RCT_EXTERN_METHOD(multiply:(nonnull NSNumber *)a withB:(nonnull NSNumber *)b withCallback:(RCTResponseSenderBlock)callback); @end
它定义了一个名为 NativeBridge 的模块，并将其中的 multiply 函数暴露给了 React Native。
然后，在 MyProject.xcodeproj 文件中，找到 Build Phases 中的 Link Binary With Libraries，并添加 NativeModule.framework。
最后，在使用原生模块的地方，可以这样调用它：
import { NativeModules } from 'react-native';
const { NativeBridge } = NativeModules;
NativeBridge.multiply(3, 4, (error, result) => {
if (!error) {
console.log(result);
}
});这将打印出 12。
Android 原生与 React Native 混编
与 iOS 的混编类似，Android 也需要进行一些设置。
步骤一：创建 React Native 项目
首先，你需要创建一个 React Native 项目，可以使用以下命令：
react-native init MyProject
注意，如果你已经创建了 React Native 项目，跳过这一步即可。
步骤二：创建原生模块
接下来，你需要创建一个原生模块。可以使用以下命令：
cd MyProject/android/app/src/main/java mkdir -p com/example/nativemodule
步骤三：编辑原生模块
接下来，你需要编辑原生模块，使其可以被 React Native 调用。
首先，在 com/example/nativemodule 中创建一个名为 NativeBridge.java 的文件，并添加以下代码：
-- -------------------- ---- -------
------- -------------------------
------ ---------------------------------------
------ --------------------------------------------------
------ ---------------------------------------
------ -----------------------------------------------------
------ --------------------------------------
------ -----------------------------------
------ ----- ------------ ------- -------------------------- -
------ ------------------------------------ ------------- -
--------------------
-
---------
------ ------ --------- -
------ ---------------
-
------------
------ ---- --------------- -- ------ -- -------- --------- -
------ ------ - - - --
--------------------- --------
-
-代码中，我们定义了一个名为 NativeBridge 的类，在其中编写了一个名为 multiply 的函数，使其可以被 React Native 调用。
步骤四：在 Android 项目中使用原生模块
最后，你需要在 Android 项目中使用原生模块。
首先，在 MyProject/android/app/build.gradle 文件中，找到 dependencies 项，并添加以下代码：
implementation project(':react-native')然后，在 com.example.nativemodule.NativeBridge 类上加上 @ReactModule 注解，以便 React Native 可以在模块名中找到它。
最后，在使用原生模块的地方，可以这样调用它：
import { NativeModules } from 'react-native';
const { NativeBridge } = NativeModules;
NativeBridge.multiply(3, 4, (error, result) => {
if (!error) {
console.log(result);
}
});这将打印出 12。
总结
本文介绍了 React Native 与原生混编的技术方案，并提供了示例代码。通过了解原生模块的创建和使用，可以更加灵活地使用 React Native 进行应用开发，并且能够使用原生代码提供的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c63ebe10032fedd38c0fd2