使用 Expo SDK、React Native 和第三方库

编辑页面

了解如何在你的项目中使用 Expo SDK、React Native 库以及其他第三方 npm 包。


For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

每个应用最终都不可避免地会使用第三方库,因此了解如何判断一个库是否与你的项目兼容非常重要。

React Native 核心库

React Native 提供了一组内置的基础原语,大多数开发者都会在应用中用到。它们包括 <ActivityIndicator><TextInput><Text><ScrollView><View> 等组件。这些内容列在 React Native 文档中的 核心组件与 API 页面。你也可以查看与你的 Expo SDK 版本对应的 React Native 版本

要在项目中使用 React Native 组件或 API,请在代码中从 react-native 包导入它:

Example
import { Text, View } from 'react-native'; export default function App() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Hello, world!</Text> </View> ); }

Expo SDK 库

Expo SDK 是对 React Native 核心库的补充。它提供了许多设备和系统功能的访问能力,例如音频、条码扫描、相机、日历、联系人、视频等。它还增加了其他强大的库,例如更新、地图、OAuth 身份验证工具等。更多信息请参阅我们如何决定 哪些内容会进入 Expo SDK

要使用 Expo SDK 中的库,请在 API 参考 中找到你要查找的库,或使用文档搜索。

Are you using this library in an existing React Native app?

如果你是使用 npx @react-native-community/cli@latest init 初始化的应用,并且还没有安装 expo 包,请参阅 安装 Expo 模块指南 以获取更多信息。

你会在每个 API 参考页面顶部看到平台兼容性标签。它会告诉你该库兼容哪些平台和环境。例如,expo-device 库的平台标签如下所示:

在平台兼容性表格之后,会有该库的描述以及一个包含安装说明的部分。例如:

Terminal
npx expo install expo-device

npx expo install 命令会选择一个与你的项目兼容的库版本,然后使用你的 JavaScript 包管理器(例如 npm)来安装它。

接下来,一个典型的 API 参考通常包括:

  • 如果该库需要配置插件,则提供配置插件的使用信息。
  • 一个展示如何使用该库的代码示例。
  • API 部分会列出如何导入该库,后面跟着该库提供的 hooks、props、types、methods 和 classes 列表。

注意:如果你使用 TypeScript,可以在支持 TypeScript 的代码编辑器(例如 VS Code)中通过自动补全查看 API 部分中包含的信息。

第三方库

查找第三方库

React Native Directory 是一个专门为 React Native 构建、可搜索的库数据库。如果你要找的库不是由 React Native 或 Expo SDK 提供的,那么在寻找适合应用的库时,这里是首先应该查看的地方。

在 React Native Directory 之后,npm registry 是下一个最佳去处。npm registry 是 JavaScript 库的权威来源,但其中列出的库不一定都与 React Native 兼容。React Native 是众多 JavaScript 运行环境之一,包括 Node.js、Web 浏览器、Electron 等,而 npm 收录了适用于所有这些环境的库。任何与 React Native 兼容的库,在你创建 开发构建 时也与 Expo 项目兼容。然而,它可能并不兼容 Expo Go 应用。

判断第三方库兼容性

使用 Expo 开发构建 来构建生产级应用。它包含你的项目运行所需的全部原生代码。这是你在发布到 App Store 或 Google Play 之前测试应用的绝佳方式。你也可以包含需要原生项目(androidios 目录)配置的库。

Expo Go 是一个供学生和学习者快速体验 React Native 的环境。它不包含支持每个库所需的全部原生代码,因此功能有限,不适合构建生产级项目。你可以访问网站并检查是否带有“✔️ Expo Go”标签,从而在 React Native Directory 中查找与 Expo Go 兼容的库。你也可以启用 按 Expo Go 筛选

要判断一个新的依赖是否会改变原生项目目录,你可以检查以下内容:

  • 该库是否包含 androidios 目录?
  • 该库的 README 是否提到了链接(linking)?
  • 该库是否要求你修改 android/app/src/main/AndroidManifest.xmlios/Podfileios/Info.plist 来更改项目配置?
  • 该库是否有 配置插件

如果你对以上任何问题的回答为“是”, 那么你应该创建一个开发构建 来在项目中使用该库。

目录中没有列出? 你可以在 GitHub 上找到该项目。一个简单的方法是使用 npx npm-home --github <package-name>。例如,要打开 react-native-localize 的 GitHub 页面,请运行:

Terminal
npx npm-home --github react-native-localize

如果你希望在判断库兼容性方面获得一些帮助,请在 React Native Directory 仓库中创建一个 issue 并告知我们。这不仅会帮助你,也会帮助其他开发者在未来更容易得到答案!

安装第三方库

我们建议始终使用 npx expo install,而不是直接使用 npm installyarn add,因为它在可能的情况下会让 Expo CLI 选择一个兼容的库版本,并且还能提醒你已知的不兼容问题。

一旦你确认该库与 React Native 兼容,就可以使用 Expo CLI 来安装该包:

Terminal
npx expo install @react-navigation/native

请务必查看项目网站或 README,了解任何额外的配置和使用说明。你可以通过以下命令快速打开 README:

Terminal
npx npm-home @react-navigation/native

如果该模块需要额外的原生配置,你可以使用 配置插件 来完成。一些包需要配置插件,但它们目前还没有,你可以参考 树外配置插件 列表。

Are you using this library in an existing React Native app?

如果你的项目不支持 Expo Prebuild,那么你将无法使用 配置插件。你可以选择采用 Expo Prebuild,或者按照相应模块网站或 README 中的额外设置指南,手动设置并配置每个库。

如果该模块不受 Expo Go 支持,你可以创建一个 开发构建

添加自定义原生代码

了解如何向你的 Expo 项目添加自定义原生代码。

将第三方库从版本检查中排除

如果你安装了某个特定版本的第三方库,并希望在 npx expo installnpx expo-doctornpx expo start 执行版本检查时将其排除,请在 package.json 文件中使用 expo.install.exclude 属性。