使用 Expo SDK、React Native 及第三方库
编辑
了解如何在项目中使用 Expo SDK、React Native 库及其他第三方 npm 包。
每个应用程序都不可避免地会使用第三方库,因此了解如何判断库是否与项目兼容至关重要。
React Native 核心库
React Native 提供了一组内置基础组件,这些组件是大多数开发者在应用中必不可少的。其中包括 <ActivityIndicator>、<TextInput>、<Text>、<ScrollView> 和 <View> 等组件。这些组件在 React Native 文档的 核心组件与 API 中有详细列举。您也可查看与 Expo SDK 版本对应的 React Native 版本。
要在项目中使用 React Native 组件或 API,请在代码中从react-native包导入:
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 库的平台标签如下所示:
在平台兼容性表格之后,包含库的描述以及安装库的说明部分。例如:
- npx expo install expo-devicenpx expo install 命令会选择与您的项目兼容的库版本,然后使用您的 JavaScript 包管理器(如 npm)进行安装。
接下来,典型的 API 参考包含:
- 若库需要配置插件,则提供配置插件的使用说明。
- 展示库使用方式的代码示例。
- API 章节:列出库的导入方式,随后罗列库提供的钩子、属性、类型、方法及类。
注意:若使用 TypeScript,您可在 TypeScript 兼容的代码编辑器(如 VS Code)中通过自动补全功能查看 API 章节包含的信息。
第三方库
查找第三方库
React Native Directory 是专为 React Native 构建的可搜索库数据库。若您所需的库未由 React Native 或 Expo SDK 提供,这将是为应用寻找库的首选之地。
在 React Native Directory 之后,npm 注册库 是次优选择。npm 注册库是 JavaScript 库的权威来源,但其中列出的库未必都兼容 React Native。React Native 只是众多 JavaScript 编程环境之一(包括 Node.js、网页浏览器、Electron 等),而 npm 收录的库适用于所有这些环境。任何兼容 React Native 的库,在创建开发构建时均可用于 Expo 项目。但需注意,这些库未必兼容Expo Go应用。
第三方库兼容性判断
请使用 Expo 开发构建 构建生产级应用。该构建包含项目运行所需的所有原生代码,是应用发布至 App Store 或 Google Play 前的理想测试方案。您还可包含需要原生项目(android 和 ios 目录)配置的库。
Expo Go 应用是迈向开发构建的可选过渡方案。开发过程中可快速测试应用,但其未包含支持所有库所需的完整原生代码。访问 React Native Directory 网站,通过“✔️ Expo Go”标记可验证库是否兼容 Expo Go。您也可启用Expo Go 筛选功能。
判断新依赖项是否会改变原生项目目录时,请检查以下事项:
- 库文件是否包含 android 或 ios 目录?
- 库的 README 文件是否提及链接操作?
- 库是否要求修改 android/app/src/main/AndroidManifest.xml 或 ios/Podfile 或 ios/Info.plist 以变更项目配置?
- 库是否提供配置插件?
若上述任一问题答案为肯定,则需创建开发构建才能在项目中使用该库。
未在目录中列出? 您可在 GitHub 上查找项目。简便操作方式为执行 npx npm-home --github <package-name>。例如要打开 react-native-localize 的 GitHub 页面,请运行:
- npx npm-home --github react-native-localize若需协助判断库的兼容性,请在 React Native Directory 仓库中创建问题报告,告知我们具体情况。这不仅能帮助您解决当前问题,还能为其他开发者提供便捷的解决方案!
安装第三方库
我们建议始终使用
npx expo install替代直接执行npm install或yarn add,因为它能让 Expo CLI 在可能的情况下自动选择兼容的库版本,并提醒您已知的兼容性问题。
确认库与 React Native 兼容后,请使用 Expo CLI 安装该包:
- npx expo install @react-navigation/native请务必关注项目官网或 README 文件,获取任何额外的配置和使用说明。您可通过以下命令快速访问 README 文件:
- npx npm-home @react-navigation/native如果模块需要额外的原生配置,可通过配置插件实现。部分包虽需配置插件但尚未提供,可参考树外配置插件列表。
Are you using this library in an existing React Native app?
若您的项目不支持Expo 预构建,则无法使用配置插件。您可选择采用 Expo 预构建,或通过各模块官网或 README 中的补充配置指南手动设置每个库。
了解如何向 Expo 项目添加自定义原生代码。
排除第三方库的版本检查
若您已安装特定版本的第三方库,并希望将其从 npx expo install、npx expo-doctor 或 npx expo start 执行的版本检查中排除,请在 package.json 文件中使用 expo.install.exclude 属性。