SuperAPI AI 工具集

react-native-ecosystem

编程与开发

查看项目

更新于 10-16 02:24

技能介绍

React Native Ecosystem 是一份围绕 React Native 生态库与生产实践的技能资料,内容截至 2026 年。它按主题组织参考条目,并给出关键推荐。

用途 该技能用于在构建 React Native 应用时,快速定位导航、状态、数据获取、动画、存储等各领域的库选型与模式参考。

主要能力与覆盖主题

  1. 核心参考:
  • 导航:React Navigation v7,涵盖 NativeStack、标签页、抽屉、类型化路由、模态框(参考 core-navigation)。
  • 状态管理:Zustand、Jotai、Redux Toolkit,包含配置、devtools、持久化模式(参考 core-state-management)。
  • 数据获取:TanStack Query v5 + Axios,涵盖查询、变更、无限列表、离线(参考 core-data-fetching)。
  • TypeScript:严格配置、组件类型、导航类型、zod 校验(参考 core-typescript)。
  1. 动画与手势:
  • Reanimated v3:useSharedValue、useAnimatedStyle、withTiming/Spring、布局动画、Keyframe(参考 features-reanimated)。
  • Gesture Handler v2:GestureDetector、Tap/Pan/Pinch/LongPress、手势组合、与 Reanimated 集成(参考 features-gesture-handler)。
  1. 设备与平台:
  • 存储:MMKV、AsyncStorage、Expo SecureStore 的选型(参考 features-storage)。
  • 权限:react-native-permissions 的检查、请求、说明理由、openSettings(参考 features-permissions)。
  • 推送通知:通过 Firebase 使用 FCM + APNs,令牌注册,前台/后台处理(参考 features-push-notifications)。
  1. 最佳实践:浅显无障碍(a11y 属性、屏幕阅读器测试、语义角色、焦点管理,参考 best-practices-accessibility)。
  2. 进阶:深度链接(Universal Links、App Links、React Navigation linking 配置、动态链接,参考 advanced-deep-linking)。

关键推荐

  • 导航:使用 createNativeStackNavigator 而非 JS stack;用 RootStackParamList 为所有路由加类型。
  • 状态与服务器数据分离:Zustand 用于客户端/UI 状态;TanStack Query 用于服务器状态,二者不要混用职责。
  • 动画:优先使用 Reanimated v3 而非旧版 Animated API;worklet 默认在 UI 线程运行。
  • 存储:MMKV 适合频繁读写(同步、约快 10 倍);AsyncStorage 适合简单持久化;SecureStore 用于凭据。
  • TypeScript:启用 strict: true;用 useNavigation<NavigationProp<RootStackParamList>>() 为导航加类型。

相关技能

  • 核心 RN 原语(View、Text、StyleSheet、FlatList、New Architecture)→ react-native-core
  • Expo SDK 与 EAS 工具链 → react-native-expo
  • 深度性能工作(FPS、bundle、TTI、内存、原生)→ react-native-performance
  • React Native Testing Library 深入 → react-native-testing

适用场景 适用于使用 React Native 构建移动应用的团队与开发者,尤其需要在导航、状态管理与数据获取、动画与手势、存储、权限、推送、无障碍和深度链接之间做技术选型和模式落地时。

限制 所给资料未提供安装命令、代码示例、收费或定价信息、具体平台支持范围、性能数值承诺与逐步操作指南;以上内容暂未提供。