为你的模块创建库

React Native 拥有丰富的库生态系统，可以解决常见问题。我们把 React Native 库收集在 reactnative.directory 网站上，这是每个 React Native 开发者都应该收藏的绝佳资源。

有时，你可能正在开发一个模块，为了代码复用，值得将其提取到一个单独的库中。这可能是一个你想在你所有应用中重复使用的库，一个你想作为开源组件分发到生态系统中的库，甚至是一个你想出售的库。

在本指南中，你将学习

如何将模块提取到库中
如何使用 NPM 分发库

将模块提取到库中

你可以使用 create-react-native-library 工具创建一个新库。该工具会设置一个新库，其中包含所有需要的样板代码：所有配置文件和各种平台所需的所有文件。它还带有一个友好的交互式菜单，指导你完成库的创建。

要将模块提取到单独的库中，你可以遵循以下步骤

创建新库
将代码从应用移动到库中
更新代码以反映新结构
发布它。

1. 创建库

通过运行以下命令开始创建过程

sh
npx create-react-native-library@latest <Name of Your Library>

为你的模块添加名称。它必须是有效的 npm 名称，因此应该全部小写。你可以使用 - 来分隔单词。
为包添加描述。
继续填写表单，直到你遇到问题 "你想要开发哪种类型的库？"
为了本指南的目的，选择 Turbo 模块 选项。请注意，你可以为新架构和旧架构创建库。
然后，你可以选择是需要一个访问平台的库（Kotlin & Objective-C）还是一个共享的 C++ 库（Android 和 iOS 的 C++）。
最后，选择 Test App 作为最后一个选项。此选项会在库文件夹中创建一个已配置好单独应用的库。

交互式提示完成后，该工具会创建一个文件夹，其结构在 Visual Studio Code 中看起来像这样

Folder structure after initializing a new library.

你可以随意探索为你创建的代码。然而，最重要的部分是

android 文件夹：这是 Android 代码所在的地方
cpp 文件夹：这是 c++ 代码所在的地方
ios 文件夹：这是 iOS 代码所在的地方
src 文件夹：这是 JS 代码所在的地方。

package.json 已经配置了我们提供给 create-react-native-library 工具的所有信息，包括包的名称和描述。请注意，package.json 也已经配置好用于运行 Codegen。

json
  "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 Native Module，它遵循了网站上其他指南中所示的准则创建：平台特定的 Turbo Native Modules，或跨平台 Turbo Native Modules。但它也适用于组件和旧架构模块和组件。你将需要调整要复制和更新的文件。

[旧架构模块和组件不需要] 将你的应用中 specs 文件夹中的代码移动到 create-react-native-library 文件夹创建的 src 文件夹中。
更新 index.ts 文件以正确导出 Turbo Native Module 规范，以便它可以在库中访问。例如

ts
import NativeSampleModule from './NativeSampleModule';

export default NativeSampleModule;

复制原生模块
- 如果你的应用中有原生模块的代码，请用你为原生模块编写的代码替换 android/src/main/java/com/<模块名称> 中的代码。
- 如果你的应用中有原生模块的代码，请用你为原生模块编写的代码替换 ios 文件夹中的代码。
- 如果你的应用中有原生模块的代码，请用你为原生模块编写的代码替换 cpp 文件夹中的代码。
[旧架构模块和组件不需要] 将所有从旧的 spec 名称到新的 spec 名称的引用进行更新，新名称是在库的 package.json 文件的 codegenConfig 字段中定义的名称。例如，如果你的应用 package.json 中将 AppSpecs 设置为 codegenConfig.name，而在库中它被称为 RNNativeSampleModuleSpec，你必须将所有出现的 AppSpecs 替换为 RNNativeSampleModuleSpec。

就是这样！你已经将所有所需的代码从你的应用中移出并放入一个单独的库中。

测试你的库

create-react-native-library 提供了一个有用的示例应用程序，该应用程序已配置为与库正常工作。这是测试它的好方法！

如果你查看 example 文件夹，你会发现与你可以从 react-native-community/template 创建的新 React Native 应用程序相同的结构。

要测试你的库

导航到 example 文件夹。
运行 yarn install 安装所有依赖项。
仅适用于 iOS，你需要安装 CocoaPods：cd ios && pod install。
从 example 文件夹运行 yarn android 构建并运行 Android。
从 example 文件夹运行 yarn ios 构建并运行 iOS。

将你的库用作本地模块

在某些情况下，你可能希望将你的库作为本地模块重复用于你的应用程序，而无需将其发布到 NPM。

在这种情况下，你可能会遇到你的库与你的应用程序并列的情况。

shell
Development
├── App
└── Library

在这种情况下，你也可以使用使用 create-react-native-library 创建的库。

通过导航到 App 文件夹并运行 yarn add ../Library 将你的库添加到你的应用程序中。
仅适用于 iOS，导航到 App/ios 文件夹并运行 bundle exec pod install 安装你的依赖项。
更新 App.tsx 代码以导入你的库中的代码。例如

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.net.cn/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 监视一些额外的路径中的文件和更改，在本例中是 ../Library 路径，其中包含你需要的 src/index 文件。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 上找到你的库。要验证这一点，请运行

bash
npm view <package.name>

其中 package.name 是你在库初始化期间在 package.json 文件中设置的 name。

现在，你可以通过运行以下命令在你的应用程序中安装该库

bash
yarn add <package.name>

注意

仅适用于 iOS，无论何时你安装了带有原生代码的新模块，你都必须重新安装 CocoaPods，方法是运行 bundle exec pod install（推荐）或 pod install（如果你不使用 Ruby 的 Bundler，不推荐）。

恭喜！你发布了你的第一个 React Native 库。

将模块提取到库中​

1. 创建库​

2. 从你的应用中复制代码​

测试你的库​

将你的库用作本地模块​

在 NPM 上发布库​