会话列表页面

大约 3 分钟

会话列表页面

会话列表组件支持创建、更新、删除会话、会话样式修改、会话状态改变(如未读消息数)等。

集成会话列表页面

在项目中集成会话列表页面组件 ConversationListFragment,并传入相应的参数即可使用。

参数是否必需描述
chatId 会话 ID。
chatType会话类型。
- 0:单聊;
- 1:群聊;
- 2:聊天室。
propsRef设置会话列表控制器。通过会话列表控制器可以实现以下会话操作:
- 创建会话;
- 更新会话,如更新会话排序、会话样式和消息未读数;
- 删除会话;
- updateRead:将会话设置为已读;
- updateExtension:设置会话自定义字段。
onLongPress按住会话列表项时发生。
onPress单击会话列表项时发生。
onUpdateReadCount更新会话列表项的消息未读数时发生。
sortPolicy设置会话列表项的排序规则。
RenderItem自定义会话列表项的样式。
import * as React from "react";
import {
  ConversationListFragment,
  ScreenContainer,
} from "react-native-chat-uikit";
export default function ChatScreen(): JSX.Element {
  const chatId = "xxx"; // 会话 ID,String 类型。
  const chatType = 0;
  return (
    <ScreenContainer mode="padding" edges={["right", "left", "bottom"]}>
      <ConversationListFragment />
    </ScreenContainer>
  );
}

效果如下图所示:

自定义实现

自定义会话样式

你可以设置 ConversationListFragment 中的 RenderItem 自定义会话样式,例如自定义头像、消息未读数以及消息时间戳等。

提示

如果开启侧滑功能,则需要设置侧滑组件的宽度。

export default function ChatScreen(): JSX.Element {
  const chatId = "xxx";
  const chatType = 0;
  return (
    <ScreenContainer mode="padding" edges={["right", "left", "bottom"]}>
      <ConversationListFragment
        RenderItem={(props) => {
          return <View />;
        }}
      />
    </ScreenContainer>
  );
}

效果如下图所示:

     

自定义会话排序

会话默认按会话 ID convId 排序。你可以设置 ConversationListFragment 中的 sortPolicy 自定义会话排序,如置顶会话或按会话中的最新一条消息的时间戳排序。

export default function ChatScreen(): JSX.Element {
  const chatId = "xxx";
  const chatType = 0;
  return (
    <ScreenContainer mode="padding" edges={["right", "left", "bottom"]}>
      <ConversationListFragment
        sortPolicy={(a: ItemDataType, b: ItemDataType) => {
          if (a.key > b.key) {
            return 1;
          } else if (a.key < b.key) {
            return -1;
          } else {
            return 0;
          }
        }}
      />
    </ScreenContainer>
  );
}

效果如下图所示:

自定义会话的未读消息数

很多组件需要关注会话的未读消息数的通知来改变消息提醒的状态。

你可以设置 ConversationListFragment 中的 onUpdateReadCount 自定义会话的未读消息数。

export default function ChatScreen(): JSX.Element {
  const chatId = "xxx";
  const chatType = 0;
  return (
    <ScreenContainer mode="padding" edges={["right", "left", "bottom"]}>
      <ConversationListFragment
        onUpdateReadCount={(unreadCount: number) => {
          // TODO:显示未读消息数
        }}
      />
    </ScreenContainer>
  );
}

效果如下图所示:

自定义会话点击事件

你可以设置 ConversationListFragment 中的 onPress 自定义会话点击事件。例如,你可以点击会话列表项,进入聊天页面。

export default function ChatScreen(): JSX.Element {
  const chatId = "xxx";
  const chatType = 0;
  return (
    <ScreenContainer mode="padding" edges={["right", "left", "bottom"]}>
      <ConversationListFragment
        onPress={(data?: ItemDataType) => {
          // TODO:进入聊天页面。
        }}
      />
    </ScreenContainer>
  );
}

自定义会话列表项长按事件

你可以设置 ConversationListFragment 中的 onLongPress 自定义会话列表项,例如长按后显示该项目的右键菜单。

export default function ChatScreen(): JSX.Element {
  const chatId = "xxx";
  const chatType = 0;
  return (
    <ScreenContainer mode="padding" edges={["right", "left", "bottom"]}>
      <ConversationListFragment
        onLongPress={(data?: ItemDataType) => {
          // TODO:显示自定义菜单。
        }}
      />
    </ScreenContainer>
  );
}

效果如下图所示: