会话列表页面

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

集成会话列表页面

在项目中集成会话列表页面组件 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>
  );
}

效果如下图所示：