使用库
React Native 提供了一组内置的 核心组件和 API,可直接在你的应用中使用。你不局限于 React Native 捆绑的组件和 API。React Native 拥有一个由数千名开发者组成的社区。如果核心组件和 API 没有你想要的功能,你或许可以从社区找到并安装一个库,以将该功能添加到你的应用中。
选择包管理器
React Native 库通常从 npm registry 安装,使用 Node.js 包管理器,例如 npm CLI 或 Yarn Classic。
如果你的电脑上安装了 Node.js,那么你已经安装了 npm CLI。一些开发者更喜欢使用 Yarn Classic,因为它安装速度稍快,并提供额外的高级功能,如 Workspaces。这两个工具都非常适合 React Native。为了解释简单,在本指南的剩余部分,我们将以 npm 为例。
💡 在 JavaScript 社区中,“library”(库)和“package”(包)这两个术语可以互换使用。
安装库
要在你的项目中安装一个库,请在终端中导航到你的项目目录并运行安装命令。让我们以 react-native-webview
为例尝试一下
- npm
- Yarn
npm install react-native-webview
yarn add react-native-webview
我们安装的库包含原生代码,在使用之前我们需要将其链接到我们的应用。
在 iOS 上链接原生代码
React Native 使用 CocoaPods 来管理 iOS 项目依赖项,大多数 React Native 库都遵循相同的约定。如果你使用的库不遵循此约定,请参阅其 README 以获取更多说明。在大多数情况下,以下说明都适用。
在我们的 ios
目录中运行 pod install
,以便将其链接到我们的原生 iOS 项目。无需切换到 ios
目录的快捷方式是运行 npx pod-install
。
npx pod-install
完成此操作后,重新构建应用二进制文件以开始使用你的新库
- npm
- Yarn
npm run ios
yarn ios
在 Android 上链接原生代码
React Native 使用 Gradle 来管理 Android 项目依赖项。安装包含原生依赖项的库后,你需要重新构建应用二进制文件才能使用你的新库
- npm
- Yarn
npm run android
yarn android
查找库
React Native Directory 是一个可搜索的库数据库,专门为 React Native 构建。这是为你的 React Native 应用查找库的首选之地。
你在该目录中找到的许多库都来自 React Native Community 或 Expo。
由 React Native Community 构建的库由志愿者和依赖 React Native 的公司个人驱动。它们通常支持 iOS、tvOS、Android、Windows,但这因项目而异。该组织中的许多库曾经是 React Native 核心组件和 API。
由 Expo 构建的库全部用 TypeScript 编写,并在可能的情况下支持 iOS、Android 和 react-native-web
。
在 React Native Directory 之后,如果你在该目录中找不到专门为 React Native 准备的库,npm registry 是下一个最佳选择。npm registry 是 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 <library-name>@<version-number>
来安装特定版本的库,例如:npm install @react-native-community/netinfo@^2.0.0
。