为模块创建独立库
本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →
React Native 拥有丰富的库生态系统来解决常见问题。我们在 reactnative.directory 网站上收集了 React Native 库资源，这是每位 React Native 开发者都应该收藏的宝贵资料库。
有时您开发的模块可能值得提取为独立库以便代码复用。这可以是您想在所有应用中复用的库，分发生态系统的开源组件库，甚至是您希望售卖的商业库。
本指南将带您了解：
-
如何将模块提取为独立库
-
如何通过 NPM 分发库
将模块提取为库
您可以使用 create-react-native-library 工具创建新库。该工具会为您搭建包含所有必需模板代码的新库：包括各平台所需的配置文件和代码文件，还提供交互式菜单引导库的创建过程。
将模块提取为独立库的操作步骤：
-
创建新库
-
将应用代码迁移至库中
-
更新代码以适应新结构
-
发布库
1. 创建库
- 运行以下命令启动创建流程：
npx create-react-native-library@latest <Name of Your Library>
-
为模块命名。必须是有效的 npm 名称（全小写），可使用
-分隔单词 -
添加包的描述信息
-
逐步填写表单直至出现 "您要开发什么类型的库？" 问题
-
本指南中选择 Turbo 模块 选项（注意：可同时支持新架构和旧架构）
-
选择需要平台访问的库（Kotlin & Objective-C）或共享 C++ 库（Android/iOS 通用的 C++ 实现）
-
最后选择
Test App选项，这将在库目录中创建已配置的独立测试应用
交互式流程完成后，工具会创建如下结构的文件夹（Visual Studio Code 视图）：
您可以自由探索生成的代码，关键目录包括：
-
android目录：存放 Android 原生代码 -
cpp文件夹：存放 C++ 代码 -
ios文件夹：存放 iOS 代码 -
src目录：存放 JavaScript 代码
package.json 已自动配置了通过 create-react-native-library 工具提供的所有信息（包括包名和描述）。注意 package.json 也已配置好 Codegen 的运行环境。
"codegenConfig": {
"name": "RN<your module name>Spec",
"type": "all",
"jsSrcsDir": "src",
"outputDir": {
"ios": "ios/generated",
"android": "android/generated"
},
"android": {
"javaPackageName": "com.<name-of-the-module>"
}
},
最后，库已包含支持 iOS 和 Android 平台链接的全部基础设施。
2. 从应用迁移代码
后续指南假设您已在应用中创建了本地 Turbo 原生模块（遵循官网指南：平台专属 Turbo 原生模块或跨平台 Turbo 原生模块）。本方法同样适用于组件和旧架构的模块/组件，您只需调整需要复制和更新的文件。
-
[仅适用于新架构] 将应用中
specs文件夹的代码迁移到create-react-native-library创建的src目录 -
更新
index.ts文件以正确导出 Turbo Native Module 规范：
import NativeSampleModule from './NativeSampleModule';
export default NativeSampleModule;
-
复制原生模块代码：
- 将应用中原生模块的 Android 代码覆盖到
android/src/main/java/com/<name-of-the-module> - 将应用中原生模块的 iOS 代码覆盖到
ios文件夹 - 将应用中的 C++ 代码覆盖到
cpp文件夹
- 将应用中原生模块的 Android 代码覆盖到
-
[仅适用于新架构] 更新所有规范名称引用：将之前的规范名称替换为新的规范名称（新名称定义在库的
package.json的codegenConfig字段中）。例如，如果你在应用的package.json中将AppSpecs设置为codegenConfig.name，而在库中它被称为RNNativeSampleModuleSpec，那么你必须将所有出现的AppSpecs替换为RNNativeSampleModuleSpec。
至此，您已将所有代码从应用迁移到独立库中
测试您的库
create-react-native-library 内置了配置完备的示例应用，这是验证库功能的最佳方式
example 目录结构与标准 React Native 应用相同，基于 react-native-community/template 创建
测试步骤：
-
进入
example目录 -
运行
yarn install安装依赖 -
仅 iOS：执行
cd ios && pod install安装 CocoaPods -
在
example目录运行yarn android构建 Android 应用 -
在
example目录运行yarn ios构建 iOS 应用
作为本地模块使用
当您希望在不发布到 NPM 的情况下复用库时
此时库与应用可能处于同级目录结构
Development
├── App
└── Library
在这种情况下，你同样可以使用通过 create-react-native-library 创建的库。
-
进入
App文件夹并执行yarn add ../Library -
仅 iOS：进入
App/ios执行bundle exec pod install -
在
App.tsx中导入库模块：
import NativeSampleModule from '../Library/src/index';
此时运行应用，Metro 可能无法找到所需的 JS 文件。这是因为 Metro 将从 App 文件夹开始运行，因此无法访问位于 Library 文件夹中的 JS 文件。需更新 metro.config.js 文件：
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
/**
* Metro configuration
* https://reactnative.dev/docs/metro
*
* @type {import('metro-config').MetroConfig}
*/
+ const path = require('path');
- const config = {}
+ const config = {
+ // Make Metro able to resolve required external dependencies
+ watchFolders: [
+ path.resolve(__dirname, '../Library'),
+ ],
+ resolver: {
+ extraNodeModules: {
+ 'react-native': path.resolve(__dirname, 'node_modules/react-native'),
+ },
+ },
+};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
watchFolders 配置指示 Metro 监视其他路径的文件变更（此处是包含所需 src/index 文件的 ../Library 路径）。
resolver 属性用于向库提供应用使用的 React Native 代码。若库引用了 React Native 代码，缺少此解析器将导致导入失败。
完成配置后即可正常构建运行应用：
-
在
example文件夹中执行yarn android命令来构建并运行 Android 应用。 -
在
example文件夹中执行yarn ios命令来构建并运行 iOS 应用。
将库发布到 NPM
得益于 create-react-native-library 工具，发布到 NPM 的所有配置已经准备就绪。
-
在模块中安装依赖：执行
yarn install。 -
运行
yarn prepare命令构建库。 -
使用
yarn release发布库。
稍等片刻后，你就能在 NPM 上找到你的库。可以通过以下命令验证：
npm view <package.name>
其中 package.name 是你在初始化库时在 package.json 文件中设置的 name。
现在，你可以通过以下命令在应用中安装该库：
yarn add <package.name>
仅针对 iOS 平台：每当安装包含原生代码的新模块时，必须重新安装 CocoaPods。推荐使用 bundle exec pod install 命令（推荐），如果未使用 Ruby 的 Bundler 则使用 pod install（不推荐）。
恭喜！你已成功发布首个 React Native 库。