跳到主要内容

Toast 轻提示

非阻塞反馈——3 秒后自动消失，居中或底部出现。

实时预览​

下方渲染的就是 src/components/ui/Toast/ToastHost.tsx 本体（reanimated 4 worklet 驱动 fade + slide），通过 react-native-web 翻译成浏览器节点。点按钮触发。

视觉规范​

元素规则
形态圆角 8 黑底（rgba(51,51,51,0.92)），白字
高度min-height 36px
宽度max-width 80%，水平居中
字号14px / 500
出现200ms fade + 8px slide-up
停留默认 3000ms
退出200ms fade

状态变体​

✓ 成功 · 绿色 #52C41A 圆点
✕ 失败 · 红色 #F4511E 圆点
ℹ 信息 · 默认无前缀图标

用法​

import { toast, ToastHost } from '@unif/react-native-design';

// 在应用根放一次 ToastHost
<ToastHost />

// 任意位置触发
toast('已保存');
toast.success('订单提交成功');
toast.error('网络异常，请重试');
toast.info('已切换到日报模式');

// 自定义时长
toast({ message: '正在同步…', duration: 5000 });

不要​

  • ❌ 不要在 Toast 里放按钮——需要交互的反馈用内联 Confirmation 或 BottomSheet
  • ❌ 不要堆叠多个 Toast——同一时间最多 1 条，新的把旧的替换
  • ❌ 不要超过 50 字——超过就用 BottomSheet 内含 Confirmation 模板