为你的模块创建一个库

React Native 拥有丰富的库生态，可以解决常见问题。我们在 reactnative.directory 网站中收集 React Native 库，这对每一位 React Native 开发者来说都是一个值得收藏的资源。

有时，你可能正在开发一个值得提取出来并独立成库以便代码复用的模块。这个库可以是你想在所有应用中复用的库，也可以是你想作为开源组件分发到生态中的库，甚至也可以是你想出售的库。

在本指南中，你将学习：

• 如何将一个模块提取为库
• 如何使用 NPM 分发该库

将模块提取为库

你可以使用 create-react-native-library 工具来创建一个新库。这个工具会为你搭建一个新库所需的所有样板代码：所有配置文件，以及各个平台所需的所有文件。它还提供了一个很棒的交互式菜单，引导你完成库的创建过程。

要将一个模块提取到一个独立的库中，你可以按照以下步骤进行：

1. 创建新库
2. 将代码从 App 移到 Library
3. 更新代码以反映新的结构
4. 发布它

1. 创建一个库

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

sh

npx create-react-native-library@latest <你的库名称>

2. 为你的模块添加名称。它必须是一个有效的 npm 名称，因此应全部为小写。你可以使用 - 分隔单词。
3. 为该包添加描述。
4. 继续填写表单，直到你看到问题 "What type of library do you want to develop?"
5. 为了本指南的目的，请选择 Turbo module 选项。请注意，你可以为 New Architecture 和 Legacy Architecture 都创建库。
6. 然后，你可以选择希望创建一个访问平台（Kotlin 和 Objective-C）的库，还是一个共享的 C++ 库（Android 和 iOS 使用 C++）。
7. 最后，选择 Test App 作为最后一个选项。此选项会在库文件夹内创建一个已单独配置好的应用。

交互式提示完成后，工具会创建一个文件夹，在 Visual Studio Code 中其结构如下所示：

你可以随意查看为你创建的代码。不过，其中最重要的部分是：

• 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. 将代码从你的 App 中复制过来

本指南的其余部分假设你在应用中已经有一个本地 Turbo Native Module，并且它是按照网站中其他指南所示的规范创建的：平台特定的 Turbo Native Modules，或者 跨平台 Turbo Native Modules。但它同样适用于组件以及旧架构的模块和组件。你需要根据需要复制和更新相应的文件。

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

ts

import NativeSampleModule from './NativeSampleModule';

export default NativeSampleModule;

3. 复制原生模块：

   • 将 android/src/main/java/com/<name-of-the-module> 中的代码替换为你在应用中为原生模块编写的代码（如果有）。
   • 将 ios 文件夹中的代码替换为你在应用中为原生模块编写的代码（如果有）。
   • 将 cpp 文件夹中的代码替换为你在应用中为原生模块编写的代码（如果有）。

4. [旧架构模块和组件不需要] 将所有从之前的 spec 名称引用更新为新的 spec 名称，也就是库的 package.json 中 codegenConfig 字段里定义的名称。例如，如果你在应用的 package.json 中将 AppSpecs 设置为 codegenConfig.name，而在库中它叫做 RNNativeSampleModuleSpec，那么你需要把每一处 AppSpecs 替换为 RNNativeSampleModuleSpec。

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

测试你的库

create-react-native-library 自带了一个有用的示例应用，它已经配置好可以正常与该库配合工作。这是测试它的绝佳方式！

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

要测试你的库：

1. 进入 example 文件夹。
2. 运行 yarn install 安装所有依赖。
3. 仅针对 iOS，需要安装 CocoaPods：cd ios && pod install。
4. 在 example 文件夹中运行 yarn android，构建并运行 Android。
5. 在 example 文件夹中运行 yarn ios，构建并运行 iOS。

将你的库作为本地模块使用

在某些场景下，你可能希望将你的库作为应用的本地模块复用，而不发布到 NPM。

在这种情况下，你最终可能会遇到这样的结构：你的库位于应用的同级目录。

Development
├── App
└── Library

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

1. 通过进入 App 文件夹并运行 yarn add ../Library，将你的库添加到应用中。
2. 仅针对 iOS，进入 App/ios 文件夹并运行 bundle exec pod install 来安装依赖。
3. 更新 App.tsx 代码，以导入你库中的代码。例如：

tsx

import NativeSampleModule from '../Library/src/index';

如果你现在运行应用，Metro 将找不到它需要为应用提供服务的 JS 文件。这是因为 Metro 会从 App 文件夹开始运行，而它无法访问位于 Library 文件夹中的 JS 文件。为了解决这个问题，让我们如下更新 metro.config.js 文件

diff

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro 配置
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
+ const path = require('path');

- const config = {}
+ const config = {
+  // 让 Metro 能够解析所需的外部依赖
+  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 中的代码：如果没有额外的 resolver，库中的导入将会失败。

在这一点上，你可以像往常一样构建并运行你的应用：

• 在 example 文件夹中运行 yarn android，构建并运行 Android。
• 在 example 文件夹中运行 yarn ios，构建并运行 iOS。

在 NPM 上发布库

借助 create-react-native-library，所有在 NPM 上发布所需的设置都已经就绪。

1. 在你的模块中安装依赖：yarn install。
2. 运行 yarn prepare 构建库。
3. 使用 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 库。