跳到主要内容
版本:0.77

使用库

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 来试一试:

npm install react-native-webview

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

在 iOS 上链接原生代码

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

在我们的 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 目录之后,npm 注册表 是下一个最佳选择,如果你在目录中找不到专门为 React Native 设计的库。npm 注册表是 JavaScript 库的权威来源,但它列出的库可能并不都与 React Native 兼容。React Native 是众多 JavaScript 编程环境之一,包括 Node.js、Web 浏览器、Electron 等,而 npm 包含适用于所有这些环境的库。

确定库的兼容性

它是否适用于 React Native?

通常 专门为其他平台构建 的库无法与 React Native 一起工作。例如包括为 Web 构建并专门针对 react-domreact-select,以及为 Node.js 构建并与你的计算机系统文件交互的 rimraf。其他像 lodash 这样的库仅使用 JavaScript 语言特性,可在任何环境中工作。随着时间的推移你会对此有所了解,但在此之前,最简单的找出方法是亲自尝试。如果结果证明它在 React Native 中无法工作,你可以使用 npm uninstall 移除包。

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

React Native 目录 允许你按平台兼容性过滤,例如 iOS、Android、Web 和 Windows。如果你想使用的库目前未列在那里,请参考该库的 README 以了解更多信息。

它是否适用于我应用版本的 React Native?

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