跳到主要内容
版本:0.84

使用库

React Native 提供了一套内置的 核心组件和 API,可以直接在你的应用中使用。但你并不局限于 React Native 自带的组件和 API。React Native 拥有数千名开发者组成的社区。如果核心组件和 API 中没有你需要的功能,你或许可以在社区里找到并安装相应的库,为你的应用添加该功能。

选择包管理器​

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

如果你的电脑上已经安装了 Node.js,那么 npm CLI 也已经安装好了。一些开发者偏好使用 Yarn Classic,因其安装速度稍快,同时还提供了如工作区(Workspaces)等高级功能。两者都非常适合用于 React Native。为了简化说明,本文后续将默认使用 npm。

备注

在 JavaScript 社区中,"library"(库)和"package"(包)两个术语通常可以互换使用。

安装库​

要在项目中安装库,请在终端进入你的项目目录,并运行安装命令。这里以 react-native-webview 为例:

npm install react-native-webview

我们安装的这个库包含了原生代码,使用前需要先与应用进行链接。

在 iOS 上链接原生代码​

React Native 使用 CocoaPods 来管理 iOS 项目依赖,大多数 React Native 库都遵循这一约定。如果你使用的库不支持,请参考该库的 README 获取更多说明。大多数情况下,以下操作适用。

在 ios 目录下运行 pod install,以链接该库到原生 iOS 项目中。无需切换目录的快捷方式是运行 npx pod-install。

npx pod-install

完成后,重新构建应用二进制文件,即可开始使用新库:

npm run ios

在 Android 上链接原生代码​

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

npm run 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 未能找到合适库,接下来推荐在 npm 注册表 中搜索。npm 注册表是 JavaScript 库的权威来源,但其列出的库不一定都兼容 React Native。React Native 是众多 JavaScript 运行环境中的一种,包括 Node.js、网页浏览器、Electron 等,npm 包含适用于所有这些环境的库。

判断库的兼容性​

它能在 React Native 上运行吗?​

通常专为其他平台构建的库不会兼容 React Native。例如,react-select 是为网页构建的,专门针对 react-dom;rimraf 是为 Node.js 构建,与计算机文件系统打交道。还有像 lodash 这类只使用 JavaScript 语言特性的库,可以在任何环境运行。随着经验积累,你会更擅长判断,暂时不确定时,最简单的办法是亲自尝试。如果发现不兼容 React Native,可以使用 npm uninstall 移除包。

它支持我的应用目标平台吗?​

React Native Directory 允许你按平台兼容性筛选,比如 iOS、Android、Web 和 Windows。如果你想用的库未列在目录中,请参考该库的 README 了解更多信息。

它支持我当前使用的 React Native 版本吗?​

库的最新版本通常兼容 React Native 的最新版本。如果你使用的是旧版本,应查阅 README 了解该库对应的 React Native 版本。你可以安装指定版本的库,例如:运行 npm install <库名>@<版本号>,示例:npm install @react-native-community/netinfo@^2.0.0。