跳到主要内容

为你的模块创建库

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

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

在本指南中,你将学习到

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

将模块提取到库中

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

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

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

1. 创建库

  1. 通过运行以下命令开始创建过程
sh
npx create-react-native-library@latest <Name of Your Library>
  1. 为你的模块添加一个名称。它必须是一个有效的 npm 名称,因此应该全部小写。你可以使用 - 来分隔单词。
  2. 添加包的描述。
  3. 继续填写表单,直到你看到问题 “你想开发哪种类型的库?” What type of Library
  4. 在本指南中,选择 Turbo module 选项。请注意,你可以为新架构和旧架构创建库。
  5. 然后,你可以选择是需要一个访问平台的库(Kotlin 和 Objective-C)还是一个共享的 C++ 库(Android 和 iOS 的 C++)。
  6. 最后,选择 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 模块,该模块是按照网站上其他指南中显示的准则创建的:特定于平台的 Turbo Native 模块,或跨平台的 Turbo Native 模块。但它也适用于组件和旧架构的模块和组件。你需要调整要复制和更新的文件。

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

export default NativeSampleModule;
  1. 复制原生模块

    • android/src/main/java/com/<module-名称> 中的代码替换为你为原生模块在应用中编写的代码(如果有)。
    • ios 文件夹中的代码替换为你为原生模块在应用中编写的代码(如果有)。
    • cpp 文件夹中的代码替换为你为原生模块在应用中编写的代码(如果有)。
  2. [旧架构模块和组件不需要] 将所有对旧规范名称的引用更新为新规范名称,新规范名称在库的 package.jsoncodegenConfig 字段中定义。例如,如果在应用的 package.json 中将 AppSpecs 设置为 codegenConfig.name,而在库中将其称为 RNNativeSampleModuleSpec,则必须将所有 AppSpecs 替换为 RNNativeSampleModuleSpec

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

测试你的库

create-react-native-library 附带了一个有用的示例应用,该应用已配置为可与库正常工作。这是测试它的好方法!

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

要测试你的库

  1. 导航到 example 文件夹。
  2. 运行 yarn install 安装所有依赖项。
  3. 仅限 iOS,你需要安装 CocoaPods:cd ios && pod install
  4. example 文件夹运行 yarn android 来构建和运行 Android。
  5. example 文件夹运行 yarn ios 来构建和运行 iOS。

将你的库用作本地模块

在某些场景中,你可能希望将你的库作为应用的本地模块重复使用,而无需发布到 NPM。

在这种情况下,你的库可能最终作为应用的同级目录存在。

shell
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 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 的代码:如果没有额外的 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 上找到你的库。要验证这一点,运行

bash
npm view <package.name>

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

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

bash
yarn add <package.name>
注意

仅限 iOS,每当你安装一个包含原生代码的新模块时,你都必须重新安装 CocoaPods,通过运行 bundle exec pod install(推荐)或如果你不使用 Ruby 的 Bundler 则运行 pod install(不推荐)。

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