Skip to main content

使用库

React Native 提供了一组内置的 核心组件和 API 可供你的应用使用。你不仅限于与 React Native 打包的组件和 API。React Native 拥有一个由数千名开发者组成的社区。如果核心组件和 API 没有你需要的内容，你也许可以从社区找到并安装库，以将功能添加到你的应用中。

¥React Native provides a set of built-in Core Components and APIs ready to use in your app. You're not limited to the components and APIs bundled with React Native. React Native has a community of thousands of developers. If the Core Components and APIs don't have what you are looking for, you may be able to find and install a library from the community to add the functionality to your app.

选择包管理器​

¥Selecting a Package Manager

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

¥React Native libraries are typically installed from the npm registry using a Node.js package manager such as npm CLI or Yarn Classic.

如果你的计算机上安装了 Node.js，那么你就已经安装了 npm CLI。一些开发者更喜欢使用 Yarn Classic，因为它的安装速度稍快一些，并且具有工作区等其他高级功能。这两个工具都可以很好地与 React Native 配合使用。为了简化解释，我们将在本指南的其余部分假设 npm。

¥If you have Node.js installed on your computer then you already have the npm CLI installed. Some developers prefer to use Yarn Classic for slightly faster install times and additional advanced features like Workspaces. Both tools work great with React Native. We will assume npm for the rest of this guide for simplicity of explanation.

💡 术语 "library" 和 "package" 在 JavaScript 社区中可以互换使用。

¥💡 The terms "library" and "package" are used interchangeably in the JavaScript community.

安装库​

¥Installing a Library

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

¥To install a library in your project, navigate to your project directory in your terminal and run the installation command. Let's try this with react-native-webview:

npm install react-native-webview

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

¥The library that we installed includes native code, and we need to link to our app before we use it.

在 iOS 上链接原生代码​

¥Linking Native Code on iOS

React Native 使用 CocoaPods 来管理 iOS 项目依赖，大多数 React Native 库都遵循相同的约定。如果你使用的库没有，请参阅其自述文件以获取更多说明。在大多数情况下，将适用以下说明。

¥React Native uses CocoaPods to manage iOS project dependencies and most React Native libraries follow this same convention. If a library you are using does not, then please refer to their README for additional instruction. In most cases, the following instructions will apply.

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

¥Run pod install in our ios directory in order to link it to our native iOS project. A shortcut for doing this without switching to the ios directory is to run npx pod-install.

npx pod-install

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

¥Once this is complete, re-build the app binary to start using your new library:

npm run ios

在 Android 上链接原生代码​

¥Linking Native Code on Android

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

¥React Native uses Gradle to manage Android project dependencies. After you install a library with native dependencies, you will need to re-build the app binary to use your new library:

npm run android

寻找库​

¥Finding Libraries

React Native 目录 是专门为 React Native 构建的可搜索库数据库。这是为你的 React Native 应用寻找库的第一个地方。

¥React Native Directory is a searchable database of libraries built specifically for React Native. This is the first place to look for a library for your React Native app.

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

¥Many of the libraries you will find on the directory are from React Native Community or Expo.

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

¥Libraries built by the React Native Community are driven by volunteers and individuals at companies that depend on React Native. They often support iOS, tvOS, Android, Windows, but this varies across projects. Many of the libraries in this organization were once React Native Core Components and APIs.

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

¥Libraries built by Expo are all written in TypeScript and support iOS, Android, and react-native-web wherever possible.

在 React Native Directory 之后，如果你在目录中找不到专门用于 React Native 的库，那么 npm 注册表 是下一个最佳位置。npm 注册表是 JavaScript 库的权威来源，但它列出的库可能并不全部与 React Native 兼容。React Native 是众多 JavaScript 编程环境之一，包括 Node.js、Web 浏览器、Electron 等，而 npm 包含适用于所有这些环境的库。

¥After React Native Directory, the npm registry is the next best place if you can't find a library specifically for React Native on the directory. The npm registry is the definitive source for JavaScript libraries, but the libraries that it lists may not all be compatible with React Native. React Native is one of many JavaScript programming environments, including Node.js, web browsers, Electron, and more, and npm includes libraries that work for all of these environments.

确定库兼容性​

¥Determining Library Compatibility

它可以与 React Native 一起使用吗？​

¥Does it work with React Native?

通常，专为其他平台构建的库无法与 React Native 一起使用。示例包括专为 Web 构建并专门针对 react-dom 的 react-select，以及专为 Node.js 构建并与计算机文件系统交互的 rimraf。其他库（如 lodash）仅使用 JavaScript 语言功能并可在任何环境中工作。随着时间的推移，你将会对此有所了解，但在此之前，最简单的方法就是亲自尝试。如果发现 npm uninstall 在 React Native 中不起作用，你可以删除使用 npm uninstall 的包。

¥Usually libraries built specifically for other platforms will not work with React Native. Examples include react-select which is built for the web and specifically targets react-dom, and rimraf which is built for Node.js and interacts with your computer file system. Other libraries like lodash use only JavaScript language features and work in any environment. You will gain a sense for this over time, but until then the easiest way to find out is to try it yourself. You can remove packages using npm uninstall if it turns out that it does not work in React Native.

它适用于我的应用支持的平台吗？​

¥Does it work for the platforms that my app supports?

React Native 目录 允许你按平台兼容性进行过滤，例如 iOS、Android、Web 和 Windows。如果当前未列出你要使用的库，请参阅该库的自述文件以了解更多信息。

¥React Native Directory allows you to filter by platform compatibility, such as iOS, Android, Web, and Windows. If the library you would like to use is not currently listed there, refer to the README for the library to learn more.

它可以与我的 React Native 应用版本一起使用吗？​

¥Does it work with my app version of React Native?

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

¥The latest version of a library is typically compatible with the latest version of React Native. If you are using an older version, you should refer to the README to know which version of the library you should install. You can install a particular version of the library by running npm install <library-name>@<version-number>, for example: npm install @react-native-community/netinfo@^2.0.0.