Expo 示例项目 是做什么的?
expo/examples 是 Expo 官方的示例库,包含约 70 个集成示例 — 目录命名格式为 with-<库名>(如 with-stripe、with-maps),每个示例围绕一个库或服务构建。这些示例并非完整应用:它们是托管式项目(不包含 ios//android/ 目录 — 原生配置通过配置插件实现),典型示例仅包含一个约 100-200 行代码的单屏幕。从中挖掘规范的集成模式 — 包括依赖集、app.json 配置插件以及 Expo 针对当前 SDK 维护的最小化粘合代码 — 并将其适配到用户的应用中。不要期望从中直接提取应用架构。
在手动编写集成代码前,优先参考示例。(类型 — 全栈、展示、启动模板 — 参见 ./references/catalog.md。)
两种模式
- 借鉴 / 适配(最常见)— 用户已有项目。找到匹配的示例,阅读其关键文件,并将其模式应用到用户的代码中。
- 脚手架 — 全新项目。直接从示例启动一个新项目。
工作流程
1. 找到合适的示例
将用户的需求映射到示例名称(例如 payments → with-stripe、auth → with-clerk)。./references/catalog.md 是一个按分类整理的快照,便于快速筛选 — 但它可能过时,因此请对照实际仓库进行确认:
# 实时示例名称:
gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name'
# 别名(已重命名)+ 已废弃(已删除/迁移)示例 — 推荐前请检查:
git clone --depth 1 https://github.com/expo/examples.git /tmp/expo-examples 2>/dev/null; cat /tmp/expo-examples/meta.json 2>/dev/null || gh api repos/expo/examples/contents/meta.json --jq '.content' | base64 -d
meta.json 是判断示例是否已重命名或已废弃(废弃示例已从仓库树中删除但仍在此列出,每个都附带 message)的唯一权威来源。如果示例在其 deprecated 映射中,不要推荐它 — 请按照 message 找到现代路径。如果示例在 aliases 中,请使用 destination。
2a. 借鉴模式 — 在不修改用户项目的前提下学习
常见场景:用户已有应用,希望了解 Expo 如何处理某个功能。将示例作为参考阅读,并手动应用模式 — 切勿在用户项目之上搭建示例。
首先,一次调用列出整个示例。 集成代码通常嵌套(例如 Stripe 的服务端路由位于 app/api/),因此单层列表会遗漏重要文件:
gh api 'repos/expo/examples/git/trees/master?recursive=1' \
--jq '.tree[].path | select(startswith("with-stripe/"))'
然后按顺序读取高信号文件: README.md(设置)→ package.json(依赖)→ app.json(配置插件/权限)→ 清单中暴露的集成代码 → .env(必需的密钥)。读取单个文件:
gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d
# 没有 gh?使用原始 URL(分支是 master):
curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts
需要读取多个文件? 许多集成分跨服务端路由、客户端 Provider 和配置文件(如 Stripe)。无需逐个文件调用 — 将整个示例拉取到一个临时的/已添加到 .gitignore 的目录(非用户项目) 中,然后使用 Grep/Read 自由阅读,最后手动应用:
npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe # 干净副本,无 git 历史
# 无 degit 时的备选方案(稀疏检出,无需完整 ~64 MB 克隆):
git clone --depth 1 --filter=blob:none --sparse https://github.com/expo/examples.git /tmp/expo-ref/examples \
&& (cd /tmp/expo-ref/examples && git sparse-checkout set with-stripe)
从该目录使用 Grep/Read 读取;完成后删除临时目录。
2b. 脚手架模式 — 从示例创建新项目
npx create-expo --example with-stripe # 短格式:npx create-expo -e with-stripe
bun create expo --example with-stripe # 使用 bun
3. 适配到用户的应用 — 非破坏性地(关键)
当用户已有应用时,仅添加示例引入的内容;切勿覆盖用户的现有配置。
- 版本对齐 — 不要复制固定版本。 示例跟踪最新的SDK,因此其
package.json中的固定版本与较旧的项目不匹配。仅使用npx expo install <pkg>添加缺少的依赖(它能解析 SDK 正确的版本),而不是复制具体的版本号。 - 合并配置,不要替换它。 仅添加示例引入、但用户缺少的
app.json/app.config.*插件和权限 — 保持用户现有的配置块不变。 - 移植集成代码。
- 根据示例的
.env格式重新创建环境变量 — 它包含占位符,而非有效的密钥。
完成的标志是: 集成代码已移植,且其所需的每个依赖、配置插件、权限和环境变量都在用户的应用中妥善处理 — 而不是仅仅看起来已连接。
注意事项
- 默认分支为
master, 而非main(影响原始 URL 和稀疏检出)。 - 一键部署。 每个示例都有一个启动 URL:
https://launch.expo.dev/?github=https://github.com/expo/examples/tree/master/<示例名>。
相关技能
- 原生 UI 组件(@expo/ui 包)→
expo-ui - 样式和原生体验屏幕 →
expo-native-ui - 导航和路由 →
expo-router - 编写原生模块 →
expo-module - 在采用最新 SDK 示例前升级 SDK →
expo-upgrade
参考
./references/catalog.md— 示例库的分类快照,用于快速筛选。
提交反馈
如果您遇到错误、有误导性或过时的信息,请报告以便 Expo 改进:
npx --yes submit-expo-feedback@latest --category skills --subject "expo-examples" "<可操作的反馈>"
仅在您有具体且可操作的反馈时提交。请包含尽可能多的相关上下文。
如果 AI 代理多次失败或用户不得不接管 Expo 任务,请加载 expo-skill-feedback 技能并按照其评估候选流程进行操作,而不是重复使用上述命令。