# React Native 与 Expo ## 概述 Expo 是一个开源框架，用于从单个 TypeScript 代码库使用 React Native 构建通用本机应用程序。它提供基于文件的路由（Expo Router）、云构建服务（EAS 构建/提交/更新）以及一组丰富的设备 API 本机模块。 **何时使用：** 针对 iOS 和 Android 的移动应用程序、具有 Web 支持的通用应用程序、需要 OTA 更新的项目、需要本机设备 API（相机、通知、触觉）的应用程序、与裸露的 React Native 相比更喜欢托管基础设施的团队。 **何时不使用：** 需要与 Expo Modules API 不兼容的大量自定义本机代码的应用程序、与现有本机应用程序的棕地集成、具有纯本机 CI/CD 要求的应用程序。 ## 快速参考图案|应用程序接口 |要点 ---|---|--- 堆栈导航|来自“expo-router”的“” |基于文件的“_layout.tsx”定义导航器标签导航 |来自“expo-router”的“<选项卡>” |带有“_layout.tsx”的“(tabs)”目录组抽屉导航|来自“expo-router/drawer”的“<抽屉>” |需要 `@react-navigation/drawer` 输入路线 | `href` 与 `/(group)/route` |在 `app.json` 中启用 `typed-routes` 开发构建 | `expo-dev-client` |自定义本机代码+开发工具 EAS 构建 | `eas build --profile 生产` |为应用商店构建云 EAS 提交 | `eas 提交 -p ios` / `-p android` |自动商店提交 OTA 更新 | `eas 更新 -- 分支生产` |仅 JS 更新，无需重建原生模块 |世博模块 API | Swift/Kotlin 与 `expo-module.config.json` 平台代码| `Platform.select()` / `.ios.tsx` |每个平台的逻辑或整个文件样式列表 | `FlatList` / `FlashList` |虚拟化，需要“keyExtractor” 相机 | `世博相机` |通过 `useCameraPermissions()` 获得权限通知 | `博览会通知` |通过“getExpoPushTokenAsync()”推送令牌触觉 | `世博会触觉` | `impactAsync`, `notificationAsync` 顺风 (RN) |原生风 v4 | `className` 属性，RN 中的 Tailwind CSS ## 常见错误错误|正确的模式 ---|--- 直接使用`react-navigation`代替Expo Router | Expo Router 使用基于文件的路由包装 React Navigation 忘记路由目录中的`_layout.tsx`每个有路由的目录都需要一个布局文件使用“expo start”进行自定义本机代码 |将“expo start --dev-client”与“expo-dev-client”一起使用本机依赖项更改后运行“eas update” |原生更改需要“eas build”，OTA 仅限 JS 硬编码平台使用“if”进行检查 |使用“Platform.select()”或平台特定的文件扩展名访问设备 API 之前不请求权限 |在相机、通知之前始终检查/请求权限使用“ScrollView”显示长列表 |使用`FlatList`或`FlashList`进行虚拟化渲染渲染函数中的内联样式 |使用组件外部的“StyleSheet.create()”定义样式 `FlatList` 上缺少 `keyExtractor` |始终提供“keyExtractor”以实现稳定的列表渲染从 Expo 提供的 API 的“react-native”导入 |优先选择“expo-*”包而不是“react-native”等价物 ## 代表团 * **模式发现** ：使用“Explore”代理 * **构建/部署审查** ：使用 `Task` 代理 * **代码审查** ：委托给 `code-reviewer` 代理 > 如果“react-patterns”技能可用，请将 React 组件模式和挂钩委托给它。如果“tanstack-query”技能可用，请将数据获取和缓存委托给它。如果“zustand”技能可用，请将客户端状态管理委托给它。如果“vitest-testing”技能可用，请将单元和组件测试模式委托给它。如果“tailwind”技能可用，请将 Tailwind CSS 实用模式委托给它（NativeWind 使用 Tailwind CSS 语法）。如果“辅助功能”技能可用，请将移动辅助功能模式委托给它。＃＃参考 * [核心模式：StyleSheet、FlatList、特定于平台的代码]() * [Expo Router 导航：堆栈、选项卡、抽屉、键入路由]() * [EAS 构建、提交和更新工作流程]() * [使用 Expo Modules API 的开发客户端和本机模块]() * [设备 API：相机、通知、触觉]() * [NativeWind Tailwind CSS 集成]() * [应用程序配置和环境设置]() * [性能优化模式]()

反应本机

包含技能