跳至主要内容

使用库

React Native 提供了一套内置的 核心组件和 API，可直接在您的应用中使用。您不仅限于与 React Native 捆绑在一起的组件和 API。React Native 拥有一个由数千名开发者组成的社区。如果核心组件和 API 没有您正在寻找的功能，您可以从社区中查找并安装库来为您的应用添加该功能。

选择包管理器​

React Native 库通常从 npm 注册表 使用 Node.js 包管理器（如 npm CLI 或 Yarn Classic）安装。

如果您的计算机上安装了 Node.js，那么您就已经安装了 npm CLI。一些开发者更喜欢使用 Yarn Classic，因为它安装速度稍快，并且具有工作区等其他高级功能。这两种工具都非常适合 React Native。为了简化说明，本指南的其余部分将假设使用 npm。

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

安装库​

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

npm install react-native-webview

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

在 iOS 上链接原生代码​

React Native 使用 CocoaPods 来管理 iOS 项目依赖项，大多数 React Native 库也遵循此约定。如果您使用的库不遵循此约定，请参阅其自述文件以获取其他说明。在大多数情况下，以下说明适用。

在我们的 ios 目录中运行 pod install 以将其链接到我们的原生 iOS 项目。无需切换到 ios 目录即可执行此操作的快捷方式是运行 npx pod-install。

npx pod-install

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

npm run ios

在 Android 上链接原生代码​

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

npm run android

查找库​

React Native 目录 是一个可搜索的库数据库，专门为 React Native 构建。这是查找 React Native 应用库的首选位置。

您在目录中找到的许多库都来自 React Native 社区 或 Expo。

由 React Native 社区构建的库由志愿者和依赖 React Native 的公司的个人驱动。它们通常支持 iOS、tvOS、Android、Windows，但各个项目之间有所不同。此组织中的许多库曾经是 React Native 核心组件和 API。

由 Expo 构建的库均使用 TypeScript 编写，并在可能的情况下支持 iOS、Android 和 react-native-web。

在 React Native 目录之后，如果在目录中找不到专门针对 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 目录 允许您按平台兼容性（如 iOS、Android、Web 和 Windows）进行筛选。如果您要使用的库目前未在其中列出，请参阅库的自述文件以了解更多信息。

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

库的最新版本通常与 React Native 的最新版本兼容。如果您使用的是旧版本，则应参阅自述文件以了解应安装哪个版本的库。您可以通过运行 npm install <library-name>@<version-number> 安装特定版本的库，例如：npm install @react-native-community/netinfo@^2.0.0。