# 世博工作流程专家 (SDK 54+) Expo SDK 54+ 开发工作流程、EAS（Expo 应用服务）和快速移动开发优化策略方面的全面专业知识。专注于本机选项卡、Expo Router v6、iOS Liquid Glass、Android 边缘到边缘和现代部署管道。 ## 我所知道的 ### Expo SDK 54 功能（2025 年 8 月） **SDK 54 中的新增功能** * **本机选项卡栏导航**：通过 React Navigation 7 实现真正的本机选项卡 * **iOS 液体玻璃支持**：半透明玻璃效果（iOS 26+） * **Android Edge-to-Edge**：默认沉浸式显示 * **expo-video 和 expo-audio**：新媒体 API 取代 expo-av * **expo-image v2** : useImage 钩子进行命令式加载 * **React Native 0.81**：新架构的基础 * **改进的开发人员体验**：更快的构建，更好的错误消息 **SDK 53 的重大变更** * `expo-av` 已弃用 → 使用 `expo-video` 和 `expo-audio` * 原生选项卡的选项卡导航 API 更改 * Android 边到边现在默认（调整填充） ### 世博会基础知识 **托管工作流程与裸工作流程** * 托管工作流程：完整的 Expo SDK、最少的本机代码 * 裸工作流程：使用 Expo 模块进行完整的本机代码访问 * **CNG（连续本地生成）**：两全其美 * 工作流程之间的迁移策略 **Expo Go 与开发版本** * Expo Go：快速测试，有限的原生模块 * 开发客户端：完整的本机模块支持、自定义构建 * 何时从 Expo Go 切换到开发版本 * 使用 EAS Build 创建自定义开发客户端 **Expo SDK 和模块** * 核心Expo模块（expo-camera、expo-location、expo-video、expo-audio） * 第三方原生模块兼容性 * 模块安装：`npx expo install ` * 自动链接自动处理本机设置 ### EAS 构建（云构建） **建立档案** * 开发构建：快速迭代、开发客户端 * 预览版本：内部测试、TestFlight/内部测试 * 生产版本：App Store/Play Store 提交 * eas.json 中的自定义构建配置文件 **特定于平台的配置** * iOS 凭证管理 * Android 密钥库处理 * 建立缓存策略 * 环境变量注入 **构建优化** * 缓存node_modules和gradle依赖 * 增量构建 * 构建机器类型（M1、Ubuntu） * 构建减少时间的策略 ### EAS 更新（OTA 更新） **无线更新** * JavaScript 捆绑包更新无需提交应用商店 * 更新渠道和分支机构 * 推出策略（逐步推出、即时推出） * 回滚功能 **更新工作流程** * 开发渠道：持续更新 * 预览通道：QA测试 * 生产渠道：分阶段推出 * 紧急修复工作流程 **更新最佳实践** * 版本兼容性管理 * 更新频率优化 * 监控更新采用情况 * 优雅地处理更新失败 ### 应用程序配置 **app.json / app.config.js** * 应用程序元数据（名称、slug、版本） * 特定于平台的配置 * 资源和图标配置 * 启动画面定制 * 深层链接设置（方案、关联域） * 权限配置 * 构建时环境变量 **eas.json** * 构建配置文件配置 * 提交个人资料设置 * 环境机密管理 * 特定于平台的构建设置 **动态配置** * 特定于环境的配置（开发、暂存、生产） * 功能标志集成 * 应用程序变体（白标应用程序） ### 开发工作流程 **快速刷新和热重载** * 了解快速刷新行为 * 解决快速刷新问题 * 何时使用完全重载与快速刷新 **调试工具** * React DevTools集成 * 使用 Chrome DevTools 进行远程调试 * 用于高级调试的 Flipper * 网络请求检查 * 性能分析 **本地发展** * 在物理设备上运行（二维码扫描） * 在模拟器/仿真器上运行 * 线下发展策略 * 隧道模式与 LAN 模式 ### 部署和分发 **应用商店提交** * iOS：TestFlight、App Store Connect 集成 * Android：内部测试、Play 商店提交 * EAS提交命令自动化 * 存储元数据管理 **内部分配** * 临时 iOS 构建 * 安卓APK分发 * 企业分布 * TestFlight 外部测试 **CI/CD 集成** * 带有 EAS 构建的 GitHub Actions * GitLab CI 集成 * 自动构建触发器 * 合并时自动进行 OTA 更新 ## 何时使用此技能当您需要帮助时询问我： * 设置 Expo SDK 54+ 开发工作流程 * 使用 EAS Build 创建开发版本 * 配置app.json或eas.json * 使用 EAS 更新设置无线更新 * 解决 Expo Go 限制问题 * 优化构建时间 * 管理应用程序凭据和机密 * 配置深层链接和 URL 方案 * 为 Expo 应用程序设置 CI/CD 管道 * 部署到 App Store 或 Play Store * 了解Expo SDK 54功能 * 从 Expo Go 迁移到开发客户端 * 处理Expo项目中的原生模块 * **实现原生选项卡导航** * **设置 iOS 液体玻璃效果** * **配置 Android 边到边显示** * **从 expo-av 迁移到 expo-video/expo-audio** * **使用 Expo Router v6 基于文件的路由** ## 基本的 Expo 命令 ### 项目设置 # 创建新的 Expo 项目 npx create-expo-app@latest MyApp # 导航到项目 cd 我的应用程序 # 启动开发服务器 npx展会开始 # 安装Expo模块 npx expo 安装 expo-camera # 检查项目健康状况 npx展会医生 ### 发展 # 从清除缓存开始 npx 博览会开始-c # 从特定模式开始 npx expo start --dev-client # 开发版本 npx expo start --go # Expo Go # 在特定平台上运行 npx 博览会运行：ios npx 博览会运行：android # 预构建本机项目（裸工作流程） npx 展会预建 ### EAS 构建 # 登录EAS 轻松登录 # 配置EAS eas 构建：配置 # 为所有平台构建 eas build --platform all # 构建开发版本 eas build --profile 开发 --platform ios # 为生产而构建 eas build --profile 生产 --platform all # 检查构建状态 eas 构建：列表 ### EAS 更新 # 配置 EAS 更新 eas更新：配置 # 将更新发布到默认频道 eas update --branch production --message“修复严重错误” # 发布到特定频道 eas update --频道预览 --message“QA 测试” # 列出已发布的更新 EAS 更新：列表 # 回滚更新 EAS更新：回滚 ### EAS 提交 # 提交到应用商店 eas 提交 --platform ios # 提交到 Play 商店 eas 提交--android 平台 # 提交具体的构建 eas 提交 --platform ios --id ## 专业提示和技巧 ### 1\.开发构建优化创建一次可重用的开发版本，然后使用 EAS 更新进行日常更改： // eas.json { “构建”：{ “发展”：{ “developmentClient”：正确， “分布”：“内部”， “ios”：{ “模拟器”：真实 } } } } 构建一次： eas build --profile 开发 --platform all 每天更新 JavaScript： eas update --branchdevelopment--message“每日变化” ### 2\.基于环境的配置使用app.config.js进行动态配置： // 应用程序.config.js 导出默认值（{配置}）=> { const isProduction = process.env.APP_ENV === '生产'; 返回{ ...配置，名称： isProduction ? '我的应用程序'：'我的应用程序开发'， slug: 'myapp', 额外：{ apiUrl： isProduction ？ 'https://api.myapp.com' : 'https://dev-api.myapp.com', AnalyticsKey：process.env.ANALYTICS_KEY， }, 更新：{ 网址：'https://u.expo.dev/your-project-id' } }; }; ### 3\.快速凭证设置让 EAS 自动管理凭证： // eas.json { “构建”：{ “生产”：{ “ios”：{ “凭据来源”：“远程” }, “安卓”：{ “凭据来源”：“远程” } } } } ### 4\.高效的构建缓存通过缓存依赖项来加速构建： // eas.json { “构建”：{ “生产”：{ “缓存”：{ “密钥”：“myapp-v1”， “路径”：[“node_modules”，“ios/Pods”，“android/.gradle”] } } } } ### 5\.逐步 OTA 推出安全地将更新部署到生产环境： # 从 10% 的部署开始 EAS更新--分支生产--message“新功能”--rollout-percentage 10 # 监控指标，然后增加 eas 更新：configure-rollout --branch production --percentage 50 # 全面推出 eas 更新：configure-rollout --branch production --percentage 100 ### 6\.物理设备快速测试对于 Expo Go（快速测试）： # 启动开发服务器 npx展会开始 # 扫描二维码： # - iOS：相机应用程序 # - Android：Expo Go 应用程序对于开发客户端（完整功能）： # 安装一次开发客户端 eas build --profile 开发 --platform ios # 通过 EAS 更新进行每日 JavaScript 更新 eas更新--分支开发 ### 7\.常见问题故障排除 **“无法解析模块”** # 清除Metro缓存 npx 博览会开始-c # 重新安装依赖 rm -rf node_modules && npm install **“EAS 上构建失败”** # 检查构建日志 eas 构建：列表 eas build:view <构建 ID> # 在本地运行预构建以尽早发现问题 npx 展会预建 **“更新未出现在应用程序中”** # 检查更新频道是否与应用程序频道匹配 Eas 频道：列表 # 验证更新是否已成功发布 eas update:list --branch 生产 # 在应用程序中强制重新加载（摇动设备→重新加载） ### 8\.原生模块集成当您需要 Expo SDK 中没有的本机模块时： # 安装模块 npm 安装react-native-awesome-module # 预构建生成原生项目 npx 展会预建 # 使用新模块重建开发客户端 eas build --profile 开发 --platform all # 继续使用 EAS 更新进行 JS 更改 eas更新--分支开发 ### 9\.本机选项卡导航（SDK 54+）使用 Expo Router v6 启用真正的本机选项卡栏： // 应用程序/(选项卡)/_layout.tsx 从“expo-router”导入{选项卡}；从'react-native'导入{平台}；导出默认函数 TabLayout() { 返回（ <标签屏幕选项={{ // 启用原生选项卡（iOS默认有半透明效果） tabBarStyle: Platform.select({ ios: {position: 'absolute' }, // 对于液体玻璃默认值：{}， }), }} > <选项卡.屏幕名称=“索引” options={{ title: 'Home', tabBarIcon: ({ color }) => }} /> <选项卡.屏幕姓名=“个人资料” options={{ title: '个人资料', tabBarIcon: ({ color }) => }} /> ）； } ### 10\. iOS 液体玻璃（SDK 54+ / iOS 26+）创建美丽的半透明效果： // 组件/GlassCard.tsx 从“react-native”导入{视图、样式表、平台}；从'expo-blur'导入{BlurView}；导出函数 GlassCard({ 儿童 }) { if (Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 26) { 返回（ <模糊视图样式={样式.卡片} 强度={60} Tint="systemMaterial" // 液体玻璃色调 > {孩子} ）； } return {children}; } const 样式 = StyleSheet.create({ 卡：{ 边框半径：16，溢出：“隐藏”， }, 后备：{ 背景颜色: 'rgba(255, 255, 255, 0.8)', }, }); ### 11\. Android 边缘到边缘 (SDK 54+) 正确处理沉浸式显示： // 应用程序/_layout.tsx 从'react-native-safe-area-context'导入{useSafeAreaInsets}；从“react-native”导入{视图、样式表、平台}；导出默认函数 RootLayout() { const insets = useSafeAreaInsets(); 返回（ <查看风格={[ 样式.容器， { // 考虑 Android 15+ 上的边缘到边缘 paddingTop：insets.top， paddingBottom: insets.bottom, }, ]} > <槽位/> ）； } // app.json - 启用边缘到边缘 { “博览会”：{ “安卓”：{ "edgeToEdge": true // SDK 54 默认值 } } } ### 12\. expo-video（替换 expo-av）现代视频播放： // 组件/VideoPlayer.tsx 从 'expo-video' 导入 { useVideoPlayer, VideoView }; 从'expo'导入{useEvent}；从'react-native'导入{StyleSheet，View}；导出函数 VideoPlayer({ 源 }: { 源: 字符串 }) { const 播放器 = useVideoPlayer(源, (播放器) => { 玩家.循环=真; 播放器.play(); }); useEvent(玩家, 'statusChange', ({ status }) => { console.log('玩家状态：', status); }); 返回（ <视图样式={styles.container}> <视频视图风格={风格.视频} 玩家={玩家} 允许全屏允许画中画 /> ）； } const 样式 = StyleSheet.create({ 容器：{ 弹性：1 }，视频: { 宽度: '100%', 纵横比: 16 / 9 }, }); ### 13\. expo-audio（取代 expo-av）现代音频处理： // 钩子/useAudio.ts 从'expo-audio'导入{useAudioPlayer，useAudioPlayerStatus}；导出函数 useAudio(来源: string) { const 播放器 = useAudioPlayer(源); const status = useAudioPlayerStatus(播放器); 返回{ 播放：() => 播放器.play(), 暂停: () =>player.pause(), 寻找：（位置：数字）=>player.seekTo（位置），正在播放：状态.正在播放，位置：状态.当前时间，持续时间：状态.持续时间， }; } ### 14\.带有 useImage 的 expo-image v2 命令式图像加载：从 'expo-image' 导入 { useImage, Image }; 导出函数 PreloadedImage({ uri }: { uri: string }) { 常量图像 = useImage(uri, { onError: (error) => console.error('加载图像失败：', error), }); 如果（！图像）{ 返回 ; } 返回（ <图片来源={图像} 样式={{宽度：图像.宽度，高度：图像.高度}} 内容适合=“封面” /> ）； } ## 与 SpecWeave 集成 **增量计划** * 在 `spec.md` 中记录 Expo 设置步骤 * 在 `plan.md` 中包含 EAS 构建/更新配置 * 在“tasks.md”中跟踪构建和部署任务 **测试策略** * 使用开发版本进行功能开发 * QA 测试的预览版本 * 为利益相关者演示进行生产构建 **生活文档** * 在`.specweave/docs/internal/operations/`中记录构建配置文件 * 跟踪运行手册中的部署过程 * 维护凭证管理程序 **成本优化** * 对于仅 JS 的更改，使用 EAS 更新而不是重建 * 缓存依赖项以减少构建时间 * 在增量报告中监控 EAS 使用情况

世博会工作流程

包含技能