React Native 在跨平台开发方面表现出色，但有些特定的功能，如深度耗尽、图形渲染或数据存储等需要使用原生模块来实现。本文将介绍如何使用 React Native 结合原生模块来开发应用，使其更快、更实用。
前置条件
对于 React Native 应用与原生模块结合使用的前置条件是需要你至少了解一种原生平台，如 iOS 或 Android，相关某些易读的语言，如 Objective-C 或 Java。
原理
React Native 提供了一个神奇的 NativeModules 接口，允许我们在 JavaScript 环境中使用原生模块。我们可以将原生模块封装成一个可调用的函数对象，并将其模块和函数对象公开到 JavaScript 环境。
以下是一个简单的实现原生模块的方法：我们将编辑 Objective-C 文件，其将封装我们需要使用的函数，并将头文件公开给 JavaScript 环境。之后，我们可以在 React Native 应用中使用该函数，只需调用 NativeModules.ourModuleName.ourFunctionName() 即可。
示例代码
对于 iOS 和 Android 应用，在创建脚手架时分别进行如下配置：
iOS
创建 MyNativeModule.h 和 MyNativeModule.m 文件并添加如下内容：
// MyNativeModule.h #import <React/RCTBridgeModule.h> @interface MyNativeModule : NSObject <RCTBridgeModule> @end
-- -------------------- ---- ------- -- ---------------- ------- ------------------ --------------- -------------- -------------------- -- ------------- ---------- - ------------------------------------ ------- -- -------- ---------- -- - ------------- ---- ------ - ----
Android
创建 MyNativeModule.java 文件并添加如下内容：
-- -------------------- ---- -------
-- -------------------
------- ------------
------ ---------------------------------------
------ --------------------------------------------------
------ ---------------------------------------
------ --------------------------------------
------ -----------------------------------------------------------
------ --------------
------ ------------------
------ ----- -------------- ---------- ------------ -
------- ----------------------- -------------
------ -------------------------------------- ------------- -
----------------- - -------------
-
---------
------ ------ --------- -
------ -----------------
-
---------
------ ----------- ------- -------------- -
----- ----------- ------- --------- - --- ------------
--------------------------------- -----------
------ ----------
-
------------
------ ---- --------------- ----- -
----------------------- ------ - - ------
-
---------
------ ---- ------------ --
---------
------ ---- --------------------------- --
-在 React Native 应用中使用原生模块
现在，我们可以在 React Native 应用中使用原生模块啦。在 JavaScript 中，我们可以通过调用 NativeModules 对象来访问原生模块：
import { NativeModules } from 'react-native';
const MyNativeModule = NativeModules.MyNativeModule;
MyNativeModule.sayHello('world');以上代码将在原生代码中输出 "Hello world"。
总结
React Native 应用与原生模块结合使用为我们提供了充分的灵活性和实用性，在应对各种需求和场景的时候，React Native 应用结合原生模块是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3b75148841e98940161dc