SuperAPI AI 工具集

react-native-patterns

前端与建站

查看项目

更新于 10-16 05:06

技能介绍

用途:提供构建可维护 React Native 组件的模式,涵盖触摸交互(Pressable)、列表渲染(FlashList)、模态(底部弹层)、无障碍、导航,以及 RN 与 Web React 不同之处。Web React 模式(hooks、context、组合)见 react-patterns 技能。

主要能力与用法要点:

  • 触摸:用 Pressable(TouchableOpacity 已弃用)。交互元素最小 44pt,可用 hitSlop 扩大热区;用样式函数或 NativeWind 处理按下反馈;主操作可加触觉反馈。
  • 文本规则:所有可见文本必须包在 <Text> 内,条件渲染与字符串插值同样适用,否则运行时崩溃。
  • 滚动与列表:固定内容用 ScrollView,动态列表用 FlashList;ScrollView/FlashList 用 contentContainerClassName 控制内层样式。FlashList 必须提供 estimatedItemSize,配合 renderItem、keyExtractor、ItemSeparatorComponent、ListEmptyComponent。
  • 弹层:用 @gorhom/bottom-sheet 替代 Web 对话框,定义 snapPoints,配合 BottomSheetModal/Provider、BottomSheetScrollView、BottomSheetBackdrop,通过 ref 的 present()/dismiss() 控制。
  • 图片:统一用 expo-image,支持远程与本地图、blurhash 占位、contentFit 与 transition。
  • 无障碍:交互元素需 accessibilityRole、accessibilityLabel,可选 accessibilityHint、accessibilityState,标题用 accessibilityRole="header"。
  • 导航:用 Expo Router 的 useRouter(),提供 push、replace、back、canGoBack,可传 params。
  • 聊天式界面:包含头部、消息流、输入栏三区;消息气泡、内联富卡片、汇总卡、提示卡、对比视图、时间线、通知消息等模式,含动画建议。

限制与注意:避免使用 TouchableOpacity、裸字符串、RN Image、FlatList 处理大数据、缺少 accessibilityLabel、用 Alert.alert 做复杂选择、在 ScrollView 的 className 上设内边距、在 renderItem 内联匿名函数。建议在真机测试触摸目标与滚动性能。

具体价格、平台支持范围与版本信息暂未提供。