跳到主要内容

使用库

React Native 提供了一套内置的核心组件和 API,可直接在你的应用中使用。你不仅限于使用 React Native 捆绑的组件和 API。React Native 拥有一个由数千名开发者组成的社区。如果核心组件和 API 不满足你的需求,你可以在社区中找到并安装一个库,以将所需功能添加到你的应用中。

选择包管理器

React Native 库通常通过 Node.js 包管理器(例如 npm CLIYarn Classic)从 npm 注册表安装。

如果你的电脑上安装了 Node.js,那么你已经安装了 npm CLI。一些开发者更喜欢使用 Yarn Classic,因为它安装速度稍快,并且具有像 Workspaces 这样的额外高级功能。这两种工具都与 React Native 配合得很好。为简化说明,本指南的其余部分将假设使用 npm。

💡 在 JavaScript 社区中,“库”和“包”这两个术语可以互换使用。

安装库

要在你的项目中安装库,请在终端中导航到项目目录并运行安装命令。让我们尝试使用 `react-native-webview`:

shell
npm install react-native-webview

我们安装的库包含原生代码,在使用之前我们需要将其链接到我们的应用。

在 iOS 上链接原生代码

React Native 使用 CocoaPods 来管理 iOS 项目依赖项,大多数 React Native 库都遵循相同的约定。如果你使用的库不遵循此约定,请参阅其 README 以获取额外说明。在大多数情况下,以下说明适用。

在我们的 `ios` 目录中运行 `pod install`,以便将其链接到我们的原生 iOS 项目。一个不切换到 `ios` 目录的快捷方式是运行 `npx pod-install`。

bash
npx pod-install

完成后,重新构建应用二进制文件以开始使用你的新库

shell
npm run ios

在 Android 上链接原生代码

React Native 使用 Gradle 来管理 Android 项目依赖项。安装具有原生依赖项的库后,你需要重新构建应用二进制文件以使用你的新库。

shell
npm run android

查找库

React Native Directory 是一个专门为 React Native 构建的库的可搜索数据库。这是您为 React Native 应用寻找库的首选。

您在目录中找到的许多库都来自 React Native CommunityExpo

由 React Native 社区构建的库由依赖 React Native 的公司中的志愿者和个人驱动。它们通常支持 iOS、tvOS、Android、Windows,但这因项目而异。该组织中的许多库曾是 React Native 核心组件和 API。

Expo 构建的库都用 TypeScript 编写,并尽可能支持 iOS、Android 和 `react-native-web`。

在 React Native Directory 之后,如果无法在目录中找到专门针对 React Native 的库,那么 npm 注册表是次佳选择。npm 注册表是 JavaScript 库的权威来源,但其中列出的库可能并非都与 React Native 兼容。React Native 是众多 JavaScript 编程环境之一,包括 Node.js、Web 浏览器、Electron 等,而 npm 包含适用于所有这些环境的库。

确定库兼容性

它与 React Native 兼容吗?

通常,专门为其他平台构建的库无法与 React Native 配合使用。例如,`react-select` 是为 Web 构建的,专门针对 `react-dom`;`rimraf` 是为 Node.js 构建的,并与您的计算机文件系统交互。而像 `lodash` 这样的其他库只使用 JavaScript 语言特性,并且可以在任何环境中工作。您会随着时间的推移对此有所了解,但在那之前,最简单的方法是亲自尝试。如果发现它不适用于 React Native,可以使用 `npm uninstall` 删除包。

它是否适用于我的应用支持的平台?

React Native Directory 允许您按平台兼容性进行筛选,例如 iOS、Android、Web 和 Windows。如果您想要使用的库目前未在此处列出,请参阅该库的 README 以了解更多信息。

它是否与我的 React Native 应用版本兼容?

库的最新版本通常与 React Native 的最新版本兼容。如果您使用的是旧版本,您应该参考 README 来了解您应该安装哪个版本的库。您可以通过运行 `npm install @` 来安装特定版本的库,例如:`npm install @react-native-community/netinfo@^2.0.0`。