SuperAPI AI 工具集

react-native-expert

编程与开发

查看项目

更新于 10-31 14:14

技能介绍

该技能是一个供 AI(如 Claude)在执行 React Native 开发任务时读取的参考条目,主体为“坑点与决策”清单,而非可直接运行的库或工具。正文以结构化写法罗列选型判断和注意事项,并建议使用 Context7 查询 React Native/Expo 文档;面向人类的说明可参考项目内 docs/architecture/HIERARCHICAL_PLANNING.md 或 docs/getting-started/ 下的相关文档。

主要能力与选型建议:

  • 列表选型:大型列表使用 FlashList(@shopify/flash-list),据称速度快 5-10 倍;简单短列表用 FlatList。
  • 存储层级:AsyncStorage 用于非敏感键值;SecureStore 用于令牌与密钥;MMKV 用于高性能同步访问。
  • 工程形态:多数项目选 Expo(EAS Build 处理原生构建);需要自定义原生模块时选裸 RN。
  • 样式方案:NativeWind 适合熟悉 Tailwind 的团队;性能关键视图用 StyleSheet。

常见陷阱:

  • FlatList 始终设置 keyExtractor,固定高度时设 getItemLayout,并配置 maxToRenderPerBatch、windowSize。
  • ScrollView 与 FlatList 互相嵌套会导致布局问题,可改用 SectionList,或嵌套横向 FlatList。
  • Platform.select 需始终包含 default 以兼容 Web。
  • Animated.Value 会跨渲染保留,应在 useRef 中创建而非 useState。
  • 使用 useWindowDimensions() 而非 Dimensions.get(),以便旋转时更新。
  • Expo 中用 npx expo install 安装兼容版本,npm install 可能装出不兼容版本。
  • 优先使用 react-native-safe-area-context,而非 react-native 自带 SafeAreaView(在 Android 上更可靠)。
  • 深链需同时配置 app.json 的 scheme 与原生 URL schemes 以支持通用链接。
  • 生产环境的 console.log 会影响性能,可用 DEV 守卫或 babel 插件剔除。

使用方式:作为 AI 编码时的上下文参考读取,按上述条目指导实现与评审。

适用场景:React Native/Expo 应用开发、列表性能优化、存储与样式方案选型、平台差异排查。

限制:资料未提供版本兼容范围、安装命令以外的配置细节、完整 API 或示例代码;具体框架行为与性能表现需以官方文档为准,暂未提供更多信息。