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

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


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

🌐 Every app is inevitably going to use a third-party library, so it's important to understand how to determine whether a library is compatible with your project.

React Native 核心库

🌐 React Native core libraries

React Native 提供了一组大多数开发者在应用中需要使用的内置原语。这些包括诸如 <ActivityIndicator><TextInput><Text><ScrollView><View> 等组件。它们在 React Native 文档中的 核心组件和 API 一节列出。你还可以查看与你的 Expo SDK 版本对应的 React Native 版本

🌐 React Native provides a set of built-in primitives that most developers will need in their apps. These include components such as <ActivityIndicator>, <TextInput>, <Text>, <ScrollView>, and <View>. These are listed at Core Components and APIs in React Native documentation. You can also view the React Native version that corresponds to your Expo SDK version.

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

🌐 To use a React Native component or API in your project, import it from the react-native package in your code:

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 libraries

Expo SDK 从 React Native 核心库的功能结束的地方接手。它提供对许多设备和系统功能的访问,例如音频、条形码扫描、相机、日历、联系人、视频等。它还添加了其他强大的库,如更新、地图、OAuth 认证工具等。欲了解更多信息,请参阅我们如何决定 哪些功能包含在 Expo SDK 中

🌐 The Expo SDK picks up where the React Native core libraries end. It provides access to a lot of device and system functionality such as audio, barcode scanning, camera, calendar, contacts, video, and so on. It also adds other powerful libraries like updates, maps, OAuth authentication tools, and more. For more information, see how we decide what goes into the Expo SDK.

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

🌐 To use a library from the Expo SDK, find the one you are looking for in the API reference or use the documentation search.

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

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

🌐 If you initialized your app using npx @react-native-community/cli@latest init and you don't have the expo package installed in it yet, see the installing Expo modules guide for more information.

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

🌐 You will see the platform compatibility tags at the top of each API reference. It tells you which platforms and environments the library is compatible with. For example, the platform tags for the expo-device library look like the following:

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

🌐 After the platform compatibility table, there is a library's description and a section with instructions on installing the library. For example:

Terminal
npx expo install expo-device

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

🌐 The npx expo install command picks a library version compatible with your project and then uses your JavaScript package manager (such as npm) to install it.

接下来,典型的 API 参考包括:

🌐 Next, a typical API reference includes:

  • 如果库需要配置插件,请配置插件使用信息。
  • 一个代码示例,展示如何使用库。
  • API 部分列出了如何导入库,后面是库提供的钩子、属性、类型、方法和类的列表。

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

第三方库

🌐 Third-party libraries

寻找第三方库

🌐 Finding a third-party library

React Native 目录 是一个可搜索的数据库,收录了专为 React Native 构建的库。如果你正在寻找的库不是由 React Native 或 Expo SDK 提供,那么这是在为你的应用寻找库时首先查找的最佳地方。

在 React Native 目录之后,npm 注册表 是下一个最佳选择。npm 注册表是 JavaScript 库的权威来源,但它列出的库可能并不全都与 React Native 兼容。React Native 是众多 JavaScript 编程环境之一,包括 Node.js、网页浏览器、Electron 等,而 npm 包含适用于所有这些环境的库。任何与 React Native 兼容的库,在创建 开发构建 时也兼容 Expo 项目。不过,它可能不兼容 Expo Go 应用。

🌐 After the React Native Directory, the npm registry is the next best place. 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. Any library that is compatible with React Native is compatible with the Expo project when you create a development build. However, it may not be compatible with the Expo Go app.

确定第三方库兼容性

🌐 Determining third-party library compatibility

使用 Expo 开发构建 来构建生产质量的应用。它包含项目运行所需的所有原生代码。这是一个在将应用发布到 App Store 或 Google Play 之前测试应用的好方法。你还可以包含需要原生项目(androidios 目录)配置的库。

🌐 Use Expo development builds for building production-quality apps. It includes all of the native code that your project needs to run. This is a great way to test your app before you publish it to the App Store or Google Play. You can also include libraries that require native projects (android and ios directories) configuration.

Expo Go 是一个供学生和学习者快速试用 React Native 的在线运行。它不包含支持所有库所需的全部原生代码,因此功能有限,不适合构建生产级项目。你可以查看 React Native Directory 来找到与 Expo Go 兼容的库,只需访问网站并确认其是否有“✔️ Expo Go”标签。你也可以启用 按 Expo Go 筛选 功能。

🌐 Expo Go is a playground for students and learners to quickly try out React Native. It does not include all of the native code required to support every library, so it's limited and not useful for building production-grade projects. You can check React Native Directory to find a library compatible with Expo Go by visiting the website and verifying that it has a "✔️ Expo Go" tag. You can also enable the filter by Expo Go.

要确定新的依赖是否更改原生项目目录,你可以检查以下内容:

🌐 To determine if a new dependency changes native project directories, you can check the following:

  • 该库是否包含 androidios 目录?
  • 库的自述文件是否提到链接?
  • 这个库是否要求你修改 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 目录仓库中创建一个问题 并告诉我们。这不仅会帮助你,也会帮助其他开发者在未来更容易找到答案!

安装第三方库

🌐 Installing a third-party library

我们建议始终使用 npx expo install 而不是直接使用 npm installyarn add,因为这样可以让 Expo CLI 在可能的情况下选择兼容的库版本,并且在已知不兼容时向你发出警告。

一旦确定该库与 React Native 兼容,使用 Expo CLI 安装该软件包:

🌐 Once you have determined if the library is compatible with React Native, use Expo CLI to install the package:

Terminal
npx expo install @react-navigation/native

请务必查看项目网站或 README 以获取任何额外的配置和使用说明。你可以使用以下命令快速访问 README:

🌐 Be sure to follow the project website or README for any additional configuration and usage instructions. You can get to the README quickly using this command:

Terminal
npx npm-home @react-navigation/native

如果该模块需要额外的原生配置,你可以使用 config plugins 来进行配置。一些软件包需要配置插件,但它们尚未提供,你可以参考 out-of-tree config plugins 的列表。

🌐 If the module needs additional native configuration, you can do so using config plugins. Some packages require a config plugin but they don't have one yet, you can refer to the list of out-of-tree config plugins.

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

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

🌐 If your project does not support Expo Prebuild then you won't be able to use config plugins. You can either adopt Expo Prebuild or set up and configure each library manually by following any additional setup guides from the respective module's website or README.

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

🌐 If the module is not supported in Expo Go, you can create a development build:

添加自定义原生代码

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

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

🌐 Excluding a third-party library from version checks

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

🌐 If you have a specific version of a third-party library installed and want it to be excluded from version checks performed by npx expo install, npx expo-doctor, or npx expo start, use the expo.install.exclude property in the package.json file.