安装方式

命令行安装

在项目根目录执行以下命令，完成 Skill 安装。

npx bzskills add MiniMax-AI/skills --skill react-native-dev

ZIP 包安装

点击下方按钮下载 ZIP 包，并解压到本地 Skills 目录。

下载 ZIP 包 →

# 下载 react-native-dev.zip
unzip react-native-dev.zip -d ./skills

skill.md

name: react-native-dev
description: |-
    React Native 和 Expo 开发指南，涵盖组件、样式、动画、导航、
    状态管理、表单、网络、性能优化、测试、原生能力、
    以及工程化（项目结构、部署、SDK 升级、CI/CD）。
    使用场景：构建 React Native 或 Expo 应用、实现动画或原生 UI、管理
    状态、获取数据、编写测试、优化性能、部署到 App Store/Play Store、
    设置 CI/CD、升级 Expo SDK，或配置 Tailwind/NativeWind。
license: MIT
metadata:
    version: "1.0.0"
    category: mobile
    sources:
        - expo/skills by Expo (https://github.com/expo/skills) — Native UI, navigation, and animation patterns
        - Expo documentation (docs.expo.dev)
        - React Native documentation (reactnative.dev)
        - EAS (Expo Application Services) documentation

React Native & Expo 开发指南

构建可用于生产环境的 React Native 和 Expo 应用实用指南。涵盖 UI、动画、状态管理、测试、性能优化和部署上线。

参考资料

根据需要查阅以下资源：

[references/navigation.md](references/navigation.md) — Expo Router：Stack、Tabs、NativeTabs（headerLargeTitle、headerBackButtonDisplayMode）、链接、模态、sheet、上下文菜单
[references/components.md](references/components.md) — FlashList 模式、expo-image、安全区域（contentInsetAdjustmentBehavior）、原生控件、毛玻璃效果、存储
[references/styling.md](references/styling.md) — StyleSheet、NativeWind/Tailwind、平台样式、主题、深色模式
[references/animations.md](references/animations.md) — Reanimated 3：进入/退出动画、共享值、手势、滚动驱动
[references/state-management.md](references/state-management.md) — Zustand（选择器、持久化）、Jotai（原子、派生）、React Query、Context
[references/forms.md](references/forms.md) — React Hook Form + Zod：表单验证、多步骤、动态数组
[references/networking.md](references/networking.md) — fetch 封装、React Query（乐观更新）、认证令牌、离线支持、API 路由、webhook
[references/performance.md](references/performance.md) — 性能分析工作流、FlashList + memo、包体积分析、TTI、内存泄漏、动画性能
[references/testing.md](references/testing.md) — Jest、React Native Testing Library、使用 Maestro 进行端到端测试
[references/native-capabilities.md](references/native-capabilities.md) — 相机、定位、权限（use*Permissions hooks）、触感反馈、通知、生物识别
[references/engineering.md](references/engineering.md) — 项目结构（components/ui/、stores/、services/）、路径别名、SDK 升级、EAS 构建/提交、CI/CD、DOM 组件

快速参考

组件推荐对照表

用途	推荐使用	替代（不推荐）
列表	`FlashList`（`@shopify/flash-list`）+ `memo` 项	`FlatList`（无视图复用）
图片	`expo-image`	RN `<Image>`（无缓存、不支持 WebP）
点击	`Pressable`	`TouchableOpacity`（旧版）
音频	`expo-audio`	`expo-av`（已弃用）
视频	`expo-video`	`expo-av`（已弃用）
动画	Reanimated 3	RN Animated API（功能有限）
手势	Gesture Handler	PanResponder（旧版）
平台判断	`process.env.EXPO_OS`	`Platform.OS`
Context	`React.use()`	`React.useContext()`（React 18）
安全区域滚动	`contentInsetAdjustmentBehavior="automatic"`	`<SafeAreaView>`
SF Symbols	`expo-image` 搭配 `source="sf:name"`	`expo-symbols`

扩展与升级

场景	考虑方案
长列表滚动卡顿	虚拟化列表库（例如 FlashList）
想要 Tailwind 类名	NativeWind v4
高频存储读取	基于同步的存储（例如 MMKV）
使用 Expo 的新项目	Expo Router 而非裸 React Navigation

状态管理

状态类型	解决方案
本地 UI 状态	`useState` / `useReducer`
共享应用状态	Zustand 或 Jotai
服务端/异步数据	React Query
表单状态	React Hook Form + Zod

性能优先级

优先级	问题	修复方案
严重	长列表卡顿	`FlashList` + 记忆化项
严重	包体积过大	避免 barrel 导入，启用 R8
高	过多重渲染	Zustand 选择器、React Compiler
高	启动慢	禁用包体积压缩、原生导航
中	动画掉帧	仅动画化 `transform` / `opacity`

新项目初始化

# 1. 创建项目
npx create-expo-app@latest my-app --template blank-typescript
cd my-app

# 2. 安装 Expo Router + 核心依赖
npx expo install expo-router react-native-safe-area-context react-native-screens

# 3. （可选）常用额外依赖
npx expo install expo-image react-native-reanimated react-native-gesture-handler

随后配置：