用途:本技能为 React Native + Expo 应用提供性能与架构模式,规则按影响程度排序,应先修复 CRITICAL 再处理 MEDIUM。适用于新建 React Native 或 Expo 应用、优化列表与滚动性能、实现动画、审查移动端性能问题,以及搭建新的 Expo 项目。
主要能力:
- 列表性能(CRITICAL):用 FlatList 或 FlashList 替代 ScrollView 渲染数据,配置 keyExtractor、getItemLayout、initialNumToRender、maxToRenderPerBatch、windowSize、removeClippedSubviews,并用 React.memo 与 useCallback 优化 renderItem;大列表可用 @shopify/flash-list。
- 动画(HIGH):使用 react-native-reanimated 在 UI 线程运行动画,配合 react-native-gesture-handler 处理手势与动画,layout 动画可用 LayoutAnimation。
- 导航(HIGH):新 Expo 项目推荐 Expo Router 的文件式路由,app 目录配合 _layout.tsx;可处理深链接、导航状态持久化与页面卸载。
- UI 模式(HIGH):安全区域、键盘避让、Platform.select 平台差异、状态栏、触控目标与 expo-haptics 触觉反馈。
- 图片与媒体(MEDIUM):使用 expo-image 获得缓存、占位、过渡与 blurhash,指定尺寸避免布局偏移,SVG 用 react-native-svg,视频用 expo-av 或 expo-video。
- 状态与数据(MEDIUM):用 MMKV 替代 AsyncStorage,用 Zustand 管理全局状态,用 TanStack Query 管理服务端状态,离线优先可用 persistQueryClient 或 WatermelonDB。
- Expo 工作流(MEDIUM):开发构建、Expo Go、EAS Build、EAS Update、配置插件与环境变量。
- 测试(LOW-MEDIUM):Jest、React Native Testing Library、Detox、Maestro。
使用方式:新建项目可用 npx create-expo-app my-app --template tabs,然后 npx expo install expo-image react-native-reanimated react-native-gesture-handler react-native-safe-area-context。开发时 npx expo start 可扫码运行,需要原生模块用 npx expo run:ios 或 eas build --profile development。EAS 构建可用 eas build --platform ios --profile production,热更新用 eas update --branch production --message "Fix bug"。
限制:资料未提供该技能的具体安装方式、收费与价格信息;部分能力依赖第三方库与 Expo 生态,实际效果受项目环境与设备影响;此技能仍在持续完善中。