Chat 聊天布局

组合顶部内容、消息区域和底部输入区。

交互示例

交互示例加载中…

用法

<Chat
  header={<ConversationHeader />}
  composer={
    <Composer value={text} onChangeText={setText} primaryAction={sendAction} />
  }
>
  <MessageList
    items={messages}
    keyExtractor={(item) => item.id}
    renderItem={(item) => <Message text={item.text} />}
  />
</Chat>

行为与接入

Chat 只协调 header、children、footer、composer 和底部留白。bottomInset 默认 0；键盘与安全区补偿由持有页面布局的宿主统一负责。

组件不持有消息、草稿或会话服务。需要独立输入区时可以直接使用 Composer，无需创建 Chat。完整消费方式见主聊天与抽屉输入。

API

查看完整 TypeScript 类型

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

import type { ReactNode } from 'react';

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

export interface ChatProps {
  children: ReactNode;
  composer?: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
  bottomInset?: number;
  style?: StyleProp<ViewStyle>;
  testID?: string;
}