mcpField
R
react-native-ecosystem

react-native-ecosystem

github.com/maikotrindade开发1345 次安装1 天前更新
代码仓库

关于 react-native-ecosystem

react-native-ecosystem 是面向 React Native 应用开发者的参考技能，涵盖导航、状态管理、数据获取、设备功能和无障碍等常用库与生产实践。内容按主题组织，并提供工具选型建议。

主要功能

  1. 01React Navigation v7 导航与路由指导
  2. 02Zustand、Jotai 和 Redux Toolkit 状态模式
  3. 03TanStack Query 与 Axios 数据获取
  4. 04Reanimated 和 Gesture Handler 动画
  5. 05存储、权限与推送通知
  6. 06无障碍与深度链接实践

适用场景

  1. 01选择导航和状态管理模式
  2. 02实现数据获取与离线列表
  3. 03添加手势、动画和设备功能
  4. 04应用无障碍与深度链接指导

安装

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

$npx skills add https://github.com/maikotrindade/awesome-react-native-skills --skill react-native-ecosystem

安装后在 Claude Code 中输入/react-native-ecosystem确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
advanced-deep-linking.md
best-practices-accessibility.md
core-data-fetching.md
core-navigation.md
core-state-management.md
core-typescript.md
features-gesture-handler.md
features-permissions.md
features-push-notifications.md
features-reanimated.md
features-storage.md

详细介绍

React Native 生态系统

涵盖截至 2026 年的 React Native 生态系统库和生产实践。

另请参阅：

  • 核心 RN 基元（View、Text、StyleSheet、FlatList、新架构）→ react-native-core
  • Expo SDK 和 EAS 工具 → react-native-expo
  • 深入性能优化（FPS、包体积、TTI、内存、原生）→ react-native-performance
  • React Native Testing Library 深入指南 → react-native-testing

核心参考

主题描述参考
导航React Navigation v7 — NativeStack、标签页、抽屉、类型化路由、模态框core-navigation
状态管理Zustand、Jotai、Redux Toolkit — 设置、开发工具、持久化模式core-state-management
数据获取TanStack Query v5 + Axios — 查询、变更、无限列表、离线core-data-fetching
TypeScript严格配置、组件类型、导航类型、zod 验证core-typescript

功能

动画与手势
主题描述参考
Reanimated v3useSharedValue、useAnimatedStyle、withTiming/Spring、布局动画、Keyframefeatures-reanimated
Gesture Handler v2GestureDetector、Tap/Pan/Pinch/LongPress、手势组合、Reanimated 集成features-gesture-handler
设备与平台
主题描述参考
存储MMKV、AsyncStorage、Expo SecureStore — 选择合适的方案features-storage
权限react-native-permissions — 检查、请求、说明理由、openSettingsfeatures-permissions
推送通知通过 Firebase 使用 FCM + APNs、令牌注册、前台/后台处理features-push-notifications

最佳实践

主题描述参考
无障碍a11y 属性、屏幕阅读器测试、语义角色、焦点管理best-practices-accessibility

进阶

主题描述参考
深度链接Universal Links、App Links、React Navigation 链接配置、动态链接advanced-deep-linking

关键建议

  • 导航：优先使用 createNativeStackNavigator，而非 JS 堆栈；使用 RootStackParamList 为所有路由添加类型
  • 状态与服务端：使用 Zustand 管理客户端/UI 状态；使用 TanStack Query 管理服务端状态——切勿混用职责
  • 动画：优先使用 Reanimated v3，而非旧版 Animated API；worklet 默认在 UI 线程上运行
  • 存储：频繁读写时使用 MMKV（同步，速度快 10 倍）；简单持久化使用 AsyncStorage；凭据使用 SecureStore
  • TypeScript：启用 strict: true；使用 useNavigation<NavigationProp<RootStackParamList>>() 为导航添加类型

评论

支持 Markdown