开发 React Native 移动端 UI 时，用…

适用于开发 React Native / iOS / Android 移动端 UI 组件，需要满足触控可用性、无障碍、平台规范、性能与加载态时。

适用场景

解决思路

1. 触控目标：所有可交互元素最小 44x44 points；按钮设置 minHeight: 44、minWidth: 44、paddingVertical: 12、paddingHorizontal: 16；图标按钮设置 width: 44、height: 44、justifyContent: 'center'、alignItems: 'center'；禁止 height: 30 或 padding: 4 导致目标过小。
2. 颜色对比：遵循 WCAG 2.1 AA，文本至少 4.5:1，大文本/UI 至少 3:1；使用安全组合如 #000000 配白色（21:1）、#374151 配白色（9.2:1）、#FFFFFF 配 gray-900（16:1）、#E5E7EB 配 gray-900（11:1）；禁止 #9CA3AF 配白色（2.6:1）、#6B7280 配 #111827（4.0:1）以及任何低于 4.5:1 的文本。
3. 可见性规则：所有按钮必须有可见边界；主按钮使用实心背景如 backgroundColor: '#1F2937' 和白色文字，paddingVertical: 16、paddingHorizontal: 24、borderRadius: 12、minHeight: 44；次按钮使用可见背景如 backgroundColor: '#F3F4F6'、minHeight: 44；Ghost 按钮必须有可见边框如 borderWidth: 1、borderColor: '#D1D5DB'、minHeight: 44；禁止 backgroundColor: 'transparent' 且无边框或文字颜色与背景一致。
4. 无障碍标签：每个可交互元素添加 accessible: true、accessibilityRole、accessibilityLabel、accessibilityHint；按钮示例 accessibilityRole: 'button'、accessibilityLabel: 'Submit form'、accessibilityHint: 'Double tap to submit your information'；无可见文字的图标按钮必须加 accessibilityLabel；图片加 accessible: true、accessibilityRole: 'image'、accessibilityLabel。
5. 焦点/按下状态：每个 Pressable 提供可见 pressed 状态，style 使用 ({ pressed }) => [styles.button, pressed && styles.buttonPressed]；pressed 样式可用 opacity: 0.7 或 backgroundColor: '#374151'。
6. 核心原则：移动 UI 围绕触控、速度、专注设计；不要 hover 状态，适配小屏和拇指友好目标，并支持单手使用和中断恢复。
7. iOS 与 Android 平台差异：使用 Platform.select 设置平台样式；iOS 阴影用 shadowColor: '#000'、shadowOffset: { width: 0, height: 2 }、shadowOpacity: 0.1、shadowRadius: 8，Android 用 elevation: 4；字体 iOS 用 System（SF Pro），Android 用 Roboto。
8. 设计语言：iOS 遵循 Human Interface Guidelines：扁平设计+微妙深度、SF Symbols、大标题 34pt、圆角 10-14pt、默认蓝色 tint；Android 遵循 Material Design 3：Material You 动态色、outlined/filled 图标、中标题 22pt、圆角 12-28pt、使用主题主色。
9. 间距系统：使用 4px 基础网格，spacing 为 xs: 4、sm: 8、md: 16、lg: 24、xl: 32、'2xl': 48；容器使用 padding: spacing.md、gap: spacing.sm。
10. 安全区：使用 useSafeAreaInsets；屏幕容器 flex: 1，paddingTop: insets.top，paddingBottom: insets.bottom，paddingLeft: Math.max(insets.left, 16)，paddingRight: Math.max(insets.right, 16)。
11. 字体比例：largeTitle fontSize 34、fontWeight '700'、letterSpacing 0.37；title 22/'700'/0.35；headline 17/'600'/-0.41；body 17/'400'/-0.41、lineHeight 22；callout 16/'400'/-0.32；caption 12/'400'/0。
12. 语义颜色：使用语义名而非字面颜色；定义 background: '#FFFFFF'、backgroundSecondary: '#F2F2F7'、backgroundTertiary: '#FFFFFF'、surface: '#FFFFFF'、surfaceElevated: '#FFFFFF'、label: '#000000'、labelSecondary: '#3C3C43'（60%）、labelTertiary: '#3C3C43'（30%）、primary: '#007AFF'、destructive: '#FF3B30'、success: '#34C759'、warning: '#FF9500'、separator: '#3C3C43'（29%）、opaqueSeparator: '#C6C6C8'；暗色变体 background: '#000000'、backgroundSecondary: '#1C1C1E'、label: '#FFFFFF'、labelSecondary: '#EBEBF5'（60%）、separator: '#545458'。
13. 动态颜色：使用 useColorScheme；scheme === 'dark' ? darkColors : colors；组件中使用 backgroundColor: colors.background、color: colors.label。
14. 触控最小尺寸：触控目标至少 44pt；button minHeight: 44、paddingHorizontal: 16、paddingVertical: 12、justifyContent: 'center'、alignItems: 'center'；iconButton width: 44、height: 44；listRow minHeight: 44、paddingVertical: 12、paddingHorizontal: 16。
15. 触控反馈：iOS 风格用 Pressable 的 pressed && { opacity: 0.7 }；Android 风格用 android_ripple={{ color: 'rgba(0, 0, 0, 0.1)', borderless: false }}。
16. 卡片模式：Card 使用 backgroundColor: '#FFFFFF'、borderRadius: 12、padding: 16；iOS 阴影 shadowColor: '#000'、shadowOffset: { width: 0, height: 2 }、shadowOpacity: 0.08、shadowRadius: 8；Android 用 elevation: 2。
17. 按钮模式：PrimaryButton 使用 Pressable，backgroundColor: '#007AFF'、borderRadius: 12、paddingVertical: 16、paddingHorizontal: 24、alignItems: 'center'；pressed 用 backgroundColor: '#0056B3'；文字 color: '#FFFFFF'、fontSize: 17、fontWeight: '600'；disabled 用 opacity: 0.5；SecondaryButton 使用 Pressable，pressed 用 opacity: 0.7。
18. 输入框模式：TextField 显示可选 label；TextInput 绑定 value/onChangeText，onFocus 设 focused true，onBlur 设 focused false；focused 时 borderColor: '#007AFF'、backgroundColor: '#FFFFFF'；error 时 borderColor: '#FF3B30'；placeholderTextColor: '#8E8E93'；errorText fontSize: 13、color: '#FF3B30'；textField 样式 backgroundColor: '#F2F2F7'、borderRadius: 10、paddingHorizontal: 16、paddingVertical: 14、fontSize: 17、color: '#000000'、borderWidth: 2、borderColor: 'transparent'。
19. 列表模式：GroupedList 用 ScrollView 按 section 渲染；sectionContent 设置 backgroundColor: '#FFFFFF'、borderRadius: 10、marginHorizontal: 16、overflow: 'hidden'；listRow 设置 flexDirection: 'row'、alignItems: 'center'、justifyContent: 'space-between'、paddingVertical: 12、paddingHorizontal: 16、minHeight: 44；separator 用 StyleSheet.hairlineWidth、backgroundColor: '#C6C6C8'、marginLeft: 16；按下背景 '#E5E5EA'；右侧用 ChevronRight color: '#C7C7CC'。
20. 底部标签栏：tabBarStyle 高度 iOS 83、其他 65；paddingBottom iOS 34、其他 10；paddingTop 10；backgroundColor: '#F8F8F8'；borderTopWidth: StyleSheet.hairlineWidth；borderTopColor: '#C6C6C8'；TabItem 图标和文字 active 用 '#007AFF'，非 active 用 '#8E8E93'，图标 size 24。
21. 头部：LargeTitleHeader 使用 useSafeAreaInsets；header paddingTop: insets.top、backgroundColor: '#F8F8F8'、borderBottomWidth: StyleSheet.hairlineWidth、borderBottomColor: '#C6C6C8'；headerContent flexDirection: 'row'、justifyContent: 'space-between'、alignItems: 'center'、paddingHorizontal: 16、paddingBottom: 8；largeTitle fontSize: 34、fontWeight: '700'、letterSpacing: 0.37。
22. 原生驱动动画：Animated.timing 设置 toValue、duration: 200、useNativeDriver: true；Animated.spring 设置 damping: 15、stiffness: 150、useNativeDriver: true。
23. 复杂动画：使用 react-native-reanimated 的 useSharedValue、useAnimatedStyle、withSpring；按下时 scale.value = withSpring(0.95)，松开时 scale.value = withSpring(1)。
24. 骨架屏：useSharedValue(0.3)；withRepeat(withSequence(withTiming(1, { duration: 500 }), withTiming(0.3, { duration: 500 })), -1, false)；Animated.View 使用 width、height、borderRadius、backgroundColor: '#E5E5EA'。
25. 加载指示器：使用原生 ActivityIndicator，size: 'large'、color: '#007AFF'；按钮 loading 时显示 ActivityIndicator color: '#FFFFFF' 并禁用 Pressable。
26. VoiceOver/TalkBack：Pressable 加 accessible: true、accessibilityRole: 'button'、accessibilityLabel、accessibilityHint；Image 加 accessible: true、accessibilityRole: 'image'、accessibilityLabel；View 分组相关元素时加 accessible: true、accessibilityRole: 'summary'、accessibilityLabel 拼接 name、role、status。
27. 动态字体：使用 PixelRatio.getFontScale() 计算 fontScale，scaledFontSize(size) = size * fontScale；或 Text 设置 allowFontScaling: true。
28. 禁止做法：不要触控目标小于 44pt；不要文字小于 12pt；不要 hover 状态；不要固定高度导致大文本破坏；不要忽略安全区；不要在 Android 使用重阴影；不要白字浅背景不检查对比；不要 JS 驱动非原生动画；不要忽略 iOS/Android 平台惯例；不要到处内联样式。
29. 常见错误修正：不要硬编码 height: 40，改用 minHeight: 44、paddingVertical: 12；Android 不要用 shadowColor，改用 Platform.select({ ios: { shadowColor: '#000', ... }, android: { elevation: 4 } })；不要固定 paddingTop: 44，改用 insets.top。
30. 移动默认值：触控目标 44pt 最小；字体 12pt 最小、17pt body、34pt large title；圆角 iOS 10-14pt、Android 12-28pt；间距 4/8/16/24/32 网格；动画 200-300ms、native driver；阴影 iOS shadowOpacity 0.08-0.15、Android elevation 2-8。
31. 高级体验检查清单：所有触控目标 44pt+；一致间距 4pt 网格；平台适配样式；安全区处理；原生动画 60fps；正确加载态；暗色模式支持；无障碍标签；操作触觉反馈；适当位置下拉刷新。

适用边界 · 注意事项

• 不适用于 Web/桌面端 UI，因为移动端触控、无 hover、安全区等规则与鼠标/键盘优先场景不同。
• 不适用于非 React Native 或非移动端项目，因为大量做法依赖 React Native API、Platform、Pressable、useSafeAreaInsets 等。
• 如果项目已有强制设计系统或组件库并禁止自定义样式值，不应直接套用这些具体颜色、尺寸和组件实现。