用途:指导在 React Native 项目中使用统一的 Button 组件(位于 @/components/Button,文件 components/Button.tsx),确保按钮具备一致的状态管理、图标支持与玻璃效果集成。
主要能力:支持状态管理、加载状态、成功/错误状态、图标,以及 iOS 上可用时的玻璃效果。设计上采用 borderRadius: 25 圆角。
基本用法:import { Button } from '@/components/Button'; 然后使用 <Button text="Click Me" onPress={() => console.log('Pressed')} />。
属性:必填 text(string 或 React.ReactNode)与 onPress(() => void)。可选 variant('primary'|'secondary'|'destructive',默认 'primary')、buttonState、loadingText、successText、errorText、icon(name、size?、position?)、successIcon(默认 'checkmark')、reset(默认 false,成功后 2 秒自动复位)、setButtonState、style。
按钮状态:类型 ButtonState 为 'default'|'disabled'|'loading'|'success'|'error'。default 可交互;disabled 禁用;loading 显示加载指示器与可选 loadingText;success 显示成功图标与可选 successText;error 显示 errorText。
图标配置:icon 的 name 为 Ionicons 图标名,size 默认 24,position 默认 'left',可取 'left' 或 'right'。
状态管理:未传 setButtonState 时组件内部管理状态;传入则外部控制。reset={true} 时进入 success 后 2 秒自动回到 default。
玻璃效果:iOS 26+ 使用 GlassView 液体玻璃效果,其他平台回退为普通 View 加背景色;自动处理,无需配置,并会根据 variant 与 buttonState 调整色调。
样式:默认 paddingVertical 14、paddingHorizontal 24、minHeight 48,可通过 style 附加。
最佳实践:使用 loading 状态时提供 loadingText;复杂场景用 setButtonState;临时成功状态用 reset;处理错误时提供 errorText;图标宜克制;destructive 仅用于破坏性操作。技术栈涉及 expo-glass-effect、@expo/vector-icons、React Native Pressable,可用 TypeScript 导入 ButtonState。