Attachments 附件

统一呈现图片、文件、进度和处理状态。

交互示例

交互示例加载中…

用法

<Attachments
  items={attachments}
  layout="grid"
  onPreview={(item) => openPreview(item)}
  onRemove={(item) => removeAttachment(item.id)}
/>

行为与接入

items 使用稳定的 id，预览和移除事件返回原项。没有条目时不占位；未提供名称显示“未命名附件”。

layout 默认 grid，也支持 mixed、carousel 与 list。图片与进度复用 Design。status 默认 idle，loadingVisual 默认 center，也支持仅显示文字的 caption；showProgressLabel 默认关闭。

进度、可移除状态与附件集合由应用提供。组件不读取本地文件、不上传、不保存文件，也不在点击移除后自行删项。

API

查看完整 TypeScript 类型

以下内容由包根公开类型生成，与当前源码保持一致。

import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';

import type { ChatAction } from '@unif/react-native-chat';

export type ChatAttachmentStatus =
  'idle' | 'uploading' | 'processing' | 'ready' | 'failed';

export interface ChatAttachmentItem {
  id: string;
  name?: string;
  kind?: 'image' | 'file' | 'audio' | 'video';
  thumbnail?: ImageSourcePropType;
  meta?: string;
  status?: ChatAttachmentStatus;
  statusText?: string;
  progress?: number;
  loadingVisual?: 'center' | 'caption';
  previewable?: boolean;
  removable?: boolean;
  removeDisabled?: boolean;
  actions?: readonly ChatAction[];
}

export interface AttachmentsProps {
  items: readonly ChatAttachmentItem[];
  layout?: 'grid' | 'mixed' | 'carousel' | 'list';
  showProgressLabel?: boolean;
  onPreview?(item: ChatAttachmentItem): void;
  onRemove?(item: ChatAttachmentItem): void;
  style?: StyleProp<ViewStyle>;
  testID?: string;
}