聊天消息

ConversationDetail 组件主要由输入组件、消息列表组件、菜单组件和导航栏组件组成。该组件支持以下功能：

• 发送和接收消息, 包括文本、表情、图片、语音、视频、文件和名片消息。
• 对消息进行复制、引用、撤回、删除、编辑、重新发送和审核。
• 从服务器拉取漫游消息。
• 清除本地消息。
• 消息翻译。
• 消息表情回复。
• 消息话题。
• 消息转发。

该组件支持多种模式：包括聊天模式、搜索结果显示模式、创建话题模式、话题模式。 通过 ConversationDetailProps.type 属性来区分。详见 ConversationDetailModelType 类型。

消息相关功能，详见功能介绍文档。

示例代码如下：

import type { NativeStackScreenProps } from "@react-navigation/native-stack";
import type { RootParamsName, RootScreenParamsList } from "../routes";
type Props = NativeStackScreenProps<RootScreenParamsList>;
export function ConversationDetailScreen(props: Props) {
  const { route } = props;
  const name = route.name as RootParamsName;

  // 必须填写的参数
  const convId = ((route.params as any)?.params as any)?.convId;
  const convType = ((route.params as any)?.params as any)?.convType;

  // 搜索模式
  const messageId = ((route.params as any)?.params as any)?.messageId;

  // 是否是多选模式
  const selectType = ((route.params as any)?.params as any)?.selectType;

  // 话题模式的参数
  const thread = ((route.params as any)?.params as any)?.thread;
  const firstMessage = ((route.params as any)?.params as any)?.firstMessage;

  // 组件模式
  const comType = React.useRef<ConversationDetailModelType>(
    name === "ConversationDetail"
      ? "chat"
      : name === "MessageThreadDetail"
      ? "thread"
      : name === "MessageHistory"
      ? "search"
      : "create_thread"
  ).current;

  return (
    <SafeAreaView
      style={{
        flex: 1,
      }}
    >
      <ConversationDetail
        type={comType}
        convId={convId}
        convType={convType}
        msgId={messageId}
        thread={thread}
        firstMessage={firstMessage}
        selectType={selectType}
      />
    </SafeAreaView>
  );
}

ConversationDetail 组件的核心属性介绍如下：

属性	类型	是否必选	描述
type	ConversationDetailModelType	是	组件模式。包括聊天模式、搜索模式、创建话题模式和话题模式。
convId	string	是	会话 ID。
convType	ChatConversationType	是	会话类型。
convName	string	否	会话名称。
containerStyle	object	否	修改组件样式。
input	object	否	输入组件属性、引用属性、自定义组件。详见输入组件介绍。
list	object	否	消息列表组件属性、引用属性、自定义组件。详见列表组件介绍。
onClickedAvatar	function	否	点击会话头像的回调。
NavigationBar	function	否	自定义导航栏组件。
enableNavigationBar	boolean	否	是否激活导航栏。如果为 false，则不显示导航栏。
selectType	ConversationSelectModeType	否	选择模式。包括普通模式和多选模式。
thread	ChatMessageThread	否	话题模式参数。话题对象。
firstMessage	ChatMessageThread	否	话题模式参数。话题消息对象。
msgId	string	否	创建话题模式或者搜索模式的参数。话题消息的 ID，或者是搜索模式的消息关键字。
parentId	string	否	创建话题模式参数。该话题的所在群组 ID。
newThreadName	string	否	创建话题模式参数。该话题的名称。
onCreateThreadResult	string	否	创建话题模式参数。创建话题的结果回调通知。
onClickedThread	function	否	点击消息气泡，打开话题页面的回调通知。可能用到路由。
onClickedVoice	function	否	点击导航栏音频按钮的回调通知。可能用到路由。
onClickedVideo	function	否	点击导航栏视频按钮的回调通知。可能用到路由。
onThreadDestroyed	function	否	话题销毁的回调通知。可能用到路由。
onThreadKicked	function	否	离开话题的回调通知。可能用到路由。
onForwardMessage	function	否	转发消息的回调通知。可能用到路由。

输入组件

MessageInput 组件主要发送消息。默认支持发送文本、表情、图片、语音、视频、文件、自定义等消息。还支持发送复合类型消息，例如：引用消息、修改消息、名片消息等。

自定义输入组件

MessageInput 组件提供自定义菜单，可以添加自定义项，实现发送自定义消息。

核心属性如下：

属性	类型	是否必选	描述
convId	string	是	会话 ID。
convType	ChatConversationType	是	会话类型。
selectType	ConversationSelectModeType	否	选择模式。包括普通模式和多选模式。
top	number	否	若使用了 SafeAreaView 组件，需要设置 top。
bottom	number	否	若使用了 SafeAreaView 组件，需要设置 bottom。
numberOfLines	number	否	输入文本组件的最大行数。默认 4 行。
onClickedSend	function	否	点击发送按钮的回调。
onEditMessageFinished	function	否	编辑消息完成的回调。
onClickedCardMenu	function	否	点击名片消息的回调。
onInitMenu	function	否	注册初始化菜单的回调。
emojiList	string[]	否	自定义表情列表。如果不设置，使用默认列表。
multiSelectCount	number	否	多选模式下的选择消息数量。
onClickedMultiSelectDeleteButton	function	否	点击删除按钮的回调通知。 内部跳转。
onClickedMultiSelectShareButton	function	否	点击转发按钮的回调通知。内部路由。
unreadCount	number	否	消息未读数。
onClickedUnreadCount	function	否	消息未读数的回调通知。

引用对象的核心方法如下：

方法	描述
close	关闭输入组件键盘，切换到一般模式。
quoteMessage	回复消息。
editMessage	编辑消息。
showMultiSelect	打开多选模式。消息列表出现复选框。
hideMultiSelect	取消多选模式。消息列表隐藏复选框。

消息列表组件

MessageList 组件主要显示和管理消息列表，支持添加、编辑和删除消息列表项。

• 发送消息会显示在消息列表，消息发送到服务器会修改消息状态，对方已读会修改状态。
• 发送消息后，在规定时间内可以撤销、编辑和回复。
• 接收的消息可以设置已读状态，附件类型消息支持附件下载。
• 消息菜单支持更新或者添加自定义项。
• 消息列表项支持修改样式、布局和显示隐藏。

自定义消息列表组件

核心属性如下：

属性	类型	是否必选	描述
convId	string	是	会话 ID。
convType	ChatConversationType	是	会话类型。
selectType	ConversationSelectModeType	否	选择模式。包括普通模式和多选模式。
containerStyle	object	否	修改组件样式。
thread	ChatMessageThread	否	话题模式参数。话题对象。
msgId	string	否	创建话题模式或者搜索模式的参数。话题消息的 ID，或者是搜索模式的消息关键字。
parentId	string	否	创建话题模式参数。该话题的所在群组 ID。
newThreadName	string	否	创建话题模式参数。该话题的名称。
firstMessage	ChatMessageThread	否	话题模式参数。话题消息对象。
onClicked	function	否	点击消息列表的回调。
onClickedItem	function	否	点击消息的回调。
onLongPressItem	function	否	长按消息的回调。
onClickedItemAvatar	function	否	点击消息头像的回调。
onClickedItemQuote	function	否	点击消息的回复的回调。
onQuoteMessageForInput	function	否	回复消息的回调。
onEditMessageForInput	function	否	修改消息的回调。
reportMessageCustomList	array	否	自定义消息举报的否的列表项。
listItemRenderProps	MessageListItemRenders	否	消息列表项的组件的自定义。还支持内部组件的自定义。
recvMessageAutoScroll	boolean	否	收到消息是否滚动到列表最下面。
messageLayoutType	MessageLayoutType	否	消息布局靠左还是靠右。
onInitMenu	function	否	注册初始化菜单的回调。
onCopyFinished	function	否	复制完成的回调。
recvMessageAutoScroll	boolean	否	收到新消息是否自动滚动屏幕消息列表。
messageLayoutType	MessageLayoutType	否	消息列表是居左还是居右。默认接收消息在左边，发送消息在右边。
messageLayoutType	MessageLayoutType	否	消息列表是居左还是居右。默认接收消息在左边，发送消息在右边。
onNoMoreMessage	function	否	已经没有更多消息的回调通知。可能多次通知注意去重。
onCreateThread	function	否	请求创建话题的回调通知。可能用到路由。
onOpenThread	function	否	打开话题的回调通知。可能用到路由。
onCreateThreadResult	function	否	创建话题结果的回调通知。可能用到路由。
onClickedEditThreadName	function	否	编辑话题名称的回调通知。可能用到路由。
onClickedOpenThreadMemberList	function	否	查看话题成员列表的回调通知。可能用到路由。
onClickedLeaveThread	function	否	离开话题的回调通知。可能用到路由。
onClickedDestroyThread	function	否	销毁话题的回调通知。可能用到路由。
onClickedMultiSelected	function	否	点击多选菜单的回调通知。
onChangeMultiItems	function	否	多选结果的回调通知。
onClickedSingleSelect	function	否	点击转发的回调通知。
onClickedHistoryDetail	function	否	点击历史消息的回调通知。可能用到路由。
onChangeUnreadCount	function	否	未读数发生变更的回调通知。可能用到路由。

对象引用的方法如下：

方法	描述
addSendMessage	发送消息。
addSendMessageToUI	发送消息到 UI，不会发送到服务器。
sendMessageToServer	发送到服务器。
removeMessage	移除消息。
recallMessage	撤回消息。
updateMessage	更新消息。
loadHistoryMessage	加载历史消息。
onInputHeightChange	输入组件的高度变化。
editMessageFinished	编辑消息完成。
scrollToBottom	滚动到消息底部。
startShowThreadMoreMenu	显示底部话题菜单。
cancelMultiSelected	取消多选。
removeMultiSelected	移除已经选择的消息。
getMultiSelectedMessages	获取已经选择的消息列表。

消息列表的头像和昵称

MessageList 组件内部并没有头像和昵称的默认值，需要用户提供。若未提供，则展示默认头像和用户 ID。

可通过以下方式提供头像和昵称：

• 注册回调：使用 Container 组件的 onRequestMultiData 属性实现。
• 主动调用：使用 ChatService.updateDataList 方法实现。调用该方法会触发内部事件分发，刷新已加载的组件页面。
• 消息携带：优先使用消息携带的头像和昵称。

事件通知

事件通知在列表中已经实现，收到对应事件会更新列表。通常情况下，不需要开发者关注。

示例应用

实现的核心是，自定义输入组件的菜单，点击自定义项发送自定义消息，自定义渲染组件来显示自定义消息。

示例如下：

export function MyMessageContent(props: MessageContentProps) {
  const { msg } = props;
  if (msg.body.type === ChatMessageType.CUSTOM) {
    return (
      <View>
        <Text>{(msg.body as ChatCustomMessageBody).params?.test}</Text>
      </View>
    );
  }
  return <MessageContent {...props} />;
}
type Props = NativeStackScreenProps<RootScreenParamsList>;
export function ConversationDetailScreen(props: Props) {
  const { navigation, route } = props;
  const convId = ((route.params as any)?.params as any)?.convId;
  const convType = ((route.params as any)?.params as any)?.convType;
  const listRef = React.useRef<MessageListRef>({} as any);
  const inputRef = React.useRef<MessageInputRef>({} as any);
  const { top, bottom } = useSafeAreaInsets();
  const im = useChatContext();

  return (
    <SafeAreaView
      style={{
        flex: 1,
      }}
    >
      <ConversationDetail
        type={"chat"}
        convId={convId}
        convType={convType}
        input={{
          ref: inputRef,
          props: {
            top,
            bottom,
            onInitMenu: (menu) => {
              return [
                ...menu,
                {
                  name: "test",
                  isHigh: false,
                  icon: "bell",
                  onClicked: () => {
                    listRef.current?.addSendMessage({
                      type: "custom",
                      msg: ChatMessage.createCustomMessage(convId, "test", 1, {
                        params: { test: "111" },
                      }),
                    });
                  },
                },
              ];
            },
          },
        }}
        list={{
          ref: listRef,
          props: {
            listItemRenderProps: {
              MessageContent: MyMessageContent,
            },
          },
        }}
      />
    </SafeAreaView>
  );
}