Community编程与开发github.com

Expo 示例项目

框架(开源)。Expo 官方示例项目仓库,包含约 70 个 `with-*` 集成示例(Stripe、Clerk、Supabase、OpenAI、地图、Reanimated、SQLite、Skia、NativeWind 等)。用于在现有 Expo 应用中集成第三方库或服务时,获取规范的、版本匹配的模式进行适配,或使用 `npx create-expo --example` 基于示例搭建新项目。

Expo 示例项目 是什么?

Expo Examples 是 Expo 官方的集成示例库,包含约 70 个以 `with-<库名>` 命名的独立示例目录。每个示例专注于单个库或服务的集成模式,并非完整应用,而是托管型项目(不含原生目录 `ios/` 或 `android/`,原生配置通过配置插件实现),典型示例仅包含约 100-200 行代码的单屏幕。该技能支持两种使用模式:一是“借鉴/适配”模式,适用于已有项目的开发者,通过阅读对应示例的关键文件(如 `package.json`、`app.json`、集成代码、`.env` 文件),将规范的集成模式手动应用到现有项目中;二是“脚手架”模式,适用于全新项目,直接使用 `npx create-expo --example <示例名>` 命令从示例创建项目。在适配过程中,必须遵循非破坏性原则:版本对齐时应使用 `npx expo install` 安装缺少的依赖而非复制固定版本号,配置合并时应仅添加示例引入的新配置项而非替换现有配置。示例的默认分支为 `master`,并通过 `meta.json` 文件管理已重命名或废弃的示例信息,确保推荐路径的准确性。

兼容平台~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-examples

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Expo 示例项目 是做什么的?

expo/examples 是 Expo 官方的示例库,包含约 70 个集成示例 — 目录命名格式为 with-<库名>(如 with-stripe、with-maps),每个示例围绕一个库或服务构建。这些示例并非完整应用:它们是托管式项目(不包含 ios//android/ 目录 — 原生配置通过配置插件实现),典型示例仅包含一个约 100-200 行代码的单屏幕。从中挖掘规范的集成模式 — 包括依赖集、app.json 配置插件以及 Expo 针对当前 SDK 维护的最小化粘合代码 — 并将其适配到用户的应用中。不要期望从中直接提取应用架构。

在手动编写集成代码前,优先参考示例。(类型 — 全栈、展示、启动模板 — 参见 ./references/catalog.md。)

两种模式

  1. 借鉴 / 适配(最常见)— 用户已有项目。找到匹配的示例,阅读其关键文件,并将其模式应用到用户的代码中。
  2. 脚手架 — 全新项目。直接从示例启动一个新项目。

工作流程

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 技能并按照其评估候选流程进行操作,而不是重复使用上述命令。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

expo/add-app-clip

Add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.

expo/building-native-ui

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

expo/eas-update-insights

Check the health of published EAS Updates: crash rates, install/launch counts, unique users, payload size, and the split between embedded and OTA users per channel. Use when the user asks how an update is performing, whether a rollout is healthy, how many users are on the embedded build vs OTA, or wants to gate CI on update health.

expo/expo-api-routes

Guidelines for creating API routes in Expo Router with EAS Hosting

expo/expo-brownfield

Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.

expo/expo-cicd-workflows

Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about CI/CD or workflows in an Expo or EAS context, mentions .eas/workflows/, or wants help with EAS build pipelines or deployment automation.

expo/expo-deployment

Deploying Expo apps to iOS App Store, Android Play Store, web hosting, and API routes

expo/expo-dev-client

Build and distribute Expo development clients locally or via TestFlight

expo/expo-module

Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript). Covers module definition DSL, native views, shared objects, config plugins, lifecycle hooks, autolinking, and type system. Use when building or modifying native modules for Expo.

expo/expo-observe

Use for anything related to EAS Observe — adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive, the useObserve hook, and the Expo Router / React Navigation integrations for per-route metrics), querying via the EAS CLI (`eas observe:metrics-summary`, `observe:metrics`, `observe:routes`, `observe:events`, `observe:versions`), or interpreting the resulting metrics (cold/warm launch, TTR, TTI, navigation cold/warm TTR, update download, and the TTI frameRate params for triaging slow startups).

expo/expo-overview

Framework (OSS). Entry point and router for every Expo or EAS task. Load this skill first — before writing code and before choosing another expo-* / eas-* skill — when the request, PRD, or spec mentions Expo, EAS, Expo Go, or an expo-* package, or the project has an `expo` dependency in `package.json`. Within that gate it also covers app specs and designs to implement (tabs, stacks, maps, lists, navigation, building from a screenshot), and phrasings like 'implement a mobile app', 'make my app look native', 'add navigation', 'fetch some data', 'upgrade my SDK', 'add Expo to my existing native app', 'ship to the App Store', or 'I'm new to Expo, where do I start'. A fully specified request (SDK pinned, libraries named, layout given) still routes through here — the shared setup rules still apply. Do NOT load it when neither signal is present: a bare React Native project with no `expo` dependency is not Expo work. Detects the real goal, routes to the right expo-* / eas-* skill, and owns the shared setup rules.

expo/expo-router

Framework (OSS). Navigation and routing for Expo Router. Covers file-based routes, groups and dynamic routes, folder organization, Link with previews and context menus, native Stack, page titles, modals and form sheets, NativeTabs, headers and toolbars, and header search bars.

expo/expo-skill-eval

Evaluate Expo skills in this repo end-to-end - trigger accuracy, generated code quality, and runtime screenshots on iOS simulator and Android emulator via Expo Go (web optional). Use when the user wants to eval an Expo skill, test that a skill produces working code, benchmark a skill with device screenshots, or verify a skill's output renders correctly.

expo/expo-tailwind-setup

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

expo/expo-ui

Framework (OSS). Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and grouped-form sections — do NOT reach for Reanimated, @gorhom/bottom-sheet, or RN built-in Picker/Switch; use @expo/ui instead. Fall back to RN built-ins only when @expo/ui is missing the component. NOTE: @expo/ui List renders native grouped rows like an iOS Settings screen — it is NOT a virtualized list; use FlatList/FlashList for large datasets. Covers universal components (Host, Column, Row, Button, Text, List, BottomSheet, FieldGroup, Switch, Slider, Picker, Menu), drop-in replacements for RN community libraries, and platform-specific SwiftUI/Jetpack Compose trees. Not for Expo Router navigation, Reanimated, or data fetching.

expo/expo-ui-jetpack-compose

`@expo/ui/jetpack-compose` package lets you use Jetpack Compose Views and modifiers in your app.

expo/expo-ui-swiftui

`@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.

expo/expo-upgrade

Framework (OSS). Guidelines for upgrading Expo SDK versions and fixing dependency issues

expo/native-data-fetching

Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).

expo/skills

Build and submit iOS and Android apps with EAS to TestFlight, the App Store, or Google Play. Supports Expo and other React Native projects, plus existing native apps. Use for eas.json setup, release pipelines, signing, app versions and build numbers, store submissions, and listing metadata. For Expo websites and API routes, use eas-hosting; for adding React Native screens to a native app, use expo-brownfield.

相关技能