mcpField
E
expo-sdk

expo-sdk

github.com/dralgorhythm开发12856 次安装14 周前更新
代码仓库

关于 expo-sdk

面向使用 Expo SDK 54+ 的 React Native 开发者，指导应用配置、路由布局及常用库的使用。内容聚焦项目初始化和移动界面开发实践。

主要功能

  1. 01创建 Expo TypeScript 项目
  2. 02配置 app.json 与路由
  3. 03设置根布局 Provider
  4. 04使用图片、触觉与安全区 API
  5. 05集成底部弹层和 FlashList

适用场景

  1. 01搭建 Expo 演示应用
  2. 02为应用配置 Expo Router
  3. 03实现移动端弹层和长列表
  4. 04为界面添加图片缓存与触觉反馈

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill expo-sdk

安装后在 Claude Code 中输入/expo-sdk确认已加载。

详细介绍

Expo SDK

概述

Expo SDK 54+ 提供托管式 React Native 开发环境，支持基于文件的路由（Expo Router）、原生模块访问和简化的构建工具。本指南涵盖应用配置、根布局 Provider 模式以及关键的 Expo/RN 库。

前置条件：使用 npx create-expo-app 创建项目，或在 package.json 中使用 Expo SDK 54+

工作流

设置新的 Expo 演示项目：

  1. 创建项目：npx create-expo-app [demo-name] --template blank-typescript
  2. 安装核心依赖：pnpm add expo-router expo-image expo-haptics react-native-reanimated react-native-gesture-handler react-native-safe-area-context @gorhom/bottom-sheet @shopify/flash-list lucide-react-native nativewind tailwindcss@3
  3. 配置 NativeWind（参见 nativewind 技能）
  4. 使用 Provider 堆栈设置根布局
  5. 在 app.json 中配置 scheme、名称和启动画面
  6. 添加路由组和屏幕
  7. 运行：pnpm start（Expo 开发服务器）

添加新库：

  1. 使用 pnpm 安装：pnpm add [library]
  2. 检查是否需要在 app.json 中配置 Expo 插件
  3. 如果添加了原生模块，则重建开发客户端：npx expo prebuild

指南

app.json 配置

演示应用的关键字段：

字段用途
expo.name显示名称
expo.slugURL 安全标识符
expo.scheme深层链接 scheme（例如，myapp）
expo.orientationportrait（演示项目的默认值）
expo.splash启动画面配置
expo.ios.bundleIdentifieriOS bundle ID
expo.android.packageAndroid 包名
expo.pluginsExpo 配置插件（例如，expo-router）
根布局 Provider 模式

根目录中的 app/_layout.tsx 使用 Provider 包裹整个应用。标准顺序：

GestureHandlerRootView (flex: 1)
  └── SafeAreaProvider
       └── ThemeProvider / Context
            └── Stack (Expo Router)
  • GestureHandlerRootView 必须位于最外层（手势处理器和底部弹层所必需）
  • SafeAreaProvider 向所有后代组件提供安全区域内边距
  • 应用级上下文 Provider 放在 SafeAreaProvider 和 Stack 之间
  • 自定义页眉使用 <Stack screenOptions={{ headerShown: false }} />
expo-image（替代 RN Image）

所有图像渲染都使用 expo-image — 它提供缓存、blurhash 占位符、内容适配模式和动画过渡效果。

关键属性：

  • source — URI 字符串或本地图像的 require()
  • placeholder — 加载状态的 blurhash 字符串
  • contentFit — 'cover' | 'contain' | 'fill'
  • transition — 淡入时长，单位为毫秒（例如，300）
expo-haptics

在交互时提供触觉反馈：

  • Haptics.selectionAsync() — 选择、切换时轻触反馈
  • Haptics.impactAsync(ImpactFeedbackStyle.Medium) — 按钮按下、卡片轻触
  • Haptics.notificationAsync(NotificationFeedbackType.Success) — 操作完成

请谨慎使用 — 每次触摸都触发触觉反馈会让人烦恼。

安全区域内边距

适配设备刘海、状态栏和 Home 指示条：

  • useSafeAreaInsets() — 返回以点为单位的 { top, bottom, left, right }
  • 应用于屏幕容器：paddingTop: insets.top
  • NativeWind 类：使用 pt-[${insets.top}px] 或用 SafeAreaView 包裹
@gorhom/bottom-sheet

用于替代 Radix Dialog，适配移动端模态界面模式：

  • 用于详情视图、选择、筛选和表单
  • 定义吸附点：snapPoints={['25%', '50%', '90%']}
  • 背景遮罩：使用 backdropComponent，并支持按下关闭
  • 在弹层内使用 BottomSheetScrollView 显示可滚动内容
  • 需要以 GestureHandlerRootView 作为祖先组件
FlashList（替代 FlatList）

来自 @shopify/flash-list 的高性能列表渲染：

  • 可直接替换 FlatList，但必须提供 estimatedItemSize 属性
  • estimatedItemSize={80} — 估算每个项目的高度，单位为点
  • 采用回收架构，实现流畅的 60fps 滚动
  • 使用 contentContainerClassName 设置 NativeWind 样式
lucide-react-native

适用于 React Native 的图标库（与网页版 lucide-react 一致）：

  • 导入单个图标：import { Home, Settings, ChevronRight } from 'lucide-react-native'
  • 属性：size、color、strokeWidth
  • 在移动端和 Web 代码库中使用一致的图标集
StatusBar

按屏幕配置状态栏外观：

  • 浅色背景使用 <StatusBar style="dark" />
  • 深色背景使用 <StatusBar style="light" />
  • 从 expo-status-bar 导入

最佳实践

  • 使用 style={{ flex: 1 }} 将根布局包裹在 GestureHandlerRootView 中
  • 所有图片都使用 expo-image（缓存、blurhash、性能）
  • 仅为主要操作（按钮、重要选择）添加触觉反馈，不要为每次触摸都添加
  • 为所有 FlashList 组件设置 estimatedItemSize
  • 将提供程序放在根目录的 _layout.tsx 中，而非单独的屏幕中
  • 手动设置内边距时使用 useSafeAreaInsets()；简单包裹时使用 SafeAreaView
  • 在真实设备上测试触觉反馈并验证性能

反模式

  • 使用 React Native Image 而非 expo-image
  • 处理大型数据集时使用 FlatList 而非 FlashList
  • 忘记 GestureHandlerRootView（会导致底部弹出层和手势崩溃）
  • 过度使用触觉反馈，为每次交互都添加反馈
  • 硬编码状态栏高度，而不使用安全区域内边距
  • 未在 FlashList 上设置 estimatedItemSize（必需属性，会触发控制台警告）
  • 将 SafeAreaView 放在 ScrollView 内（会导致布局问题）
  • 未将 expo-router 插件添加到 app.json 的 plugins 数组中

评论

支持 Markdown