创建模块库

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

有时，您可能正在处理一个值得提取到单独库中以供代码重用的模块。这可能是一个您希望在所有应用程序中重用的库，一个您希望作为开源组件分发到生态系统的库，甚至是一个您想出售的库。

在本指南中，您将学习

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

将模块提取到库中

您可以使用 create-react-native-library 工具创建新的库。此工具将设置一个新的库，其中包含所有所需的样板代码：所有配置文件以及各种平台所需的所有文件。它还带有一个不错的交互式菜单，可以引导您完成库的创建过程。

要将模块提取到单独的库中，您可以按照以下步骤操作

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

1. 创建库

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

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

2. 添加模块的名称。它必须是有效的 npm 名称，因此应全部小写。您可以使用 - 分隔单词。
3. 添加包的描述。
4. 继续填写表单，直到您看到问题“您想开发哪种类型的库？”
5. 为了本指南的目的，选择“Turbo 模块”选项。请注意，您可以为新架构和旧版架构创建库。
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 也已配置为运行代码生成。

  "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 原生模块，它是根据网站上其他指南中显示的指南创建的：特定于平台的 Turbo 原生模块，或 跨平台 Turbo 原生模块。但它也适用于组件和旧版架构模块和组件。您需要调整您需要复制和更新的文件。

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

import NativeSampleModule from './NativeSampleModule';

export default NativeSampleModule;

3. 复制原生模块

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

4. [旧版架构模块和组件不需要] 将所有从先前规范名称到新规范名称的引用更新为库的 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 代码以导入库中的代码。例如

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 的设置已经到位。

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（推荐）或 pod install（如果您不使用 Ruby 的 Bundler，不推荐）。

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