Skip to content

会话列表组件 ConversationList

Jump to bottom
张东 edited this page Jun 5, 2024 · 1 revision

组件说明

ConversationList 组件用于展示当前用户的所有会话 (包含单聊和群聊, 但是不包括聊天室)，并且提供会话搜索、删除、置顶和免打扰功能。

  • 对于单聊, 会话展示的名称为对方昵称，若对方未设置昵称则展示对方的用户 ID，会话头像是对方的头像，如果没有设置则使用默认头像。
  • 对于群聊，会话名称为当前群组的名称，头像为默认头像。

使用示例

import React, { useEffect, useState } from 'react';
import { ConversationList } from 'easemob-chat-uikit';
import 'easemob-chat-uikit/style.css';

const Conversation = () => {
  return (
    <div style={{ width: '30%', height: '100%' }}>
      <ConversationList />
    </div>
  );
};

image

自定义会话列表

如果默认的会话列表页面不能满足需求，你可以使用 ConversationList 组件提供的属性进行自定义。

自定义会话列表区域的样式

你可以自定义会话列表区域的背景颜色、大小等样式。

  1. 对组件添加 className 定义样式。
import React from 'react';
import { ConversationList } from 'easemob-chat-uikit';
import 'easemob-chat-uikit/style.css';
import './index.css';

const Conversation = () => {
  return (
    <div style={{ width: '30%', height: '100%' }}>
      <ConversationList className="conversation" />
    </div>
  );
};
  1. 在 index.css 中定义会话 UI 样式：
.conversation {
  background-color: '#00bcd4';
  height: 100%;
  width: 100%;
}

image

自定义会话列表页面的 header

你可以自定义 ConversationList 组件的 header 元素，例如，标题名称为 custom header。

import React from 'react';
import { ConversationList, Header, Avatar } from 'easemob-chat-uikit';
import 'easemob-chat-uikit/style.css';

const Conversation = () => {
  return (
    <div style={{ width: '30%', height: '100%' }}>
      <ConversationList
        renderHeader={() => (
          <Header
            avatar={<Avatar>D</Avatar>}
            content="custom header"
            moreAction={{  
              visible: true,
              actions: [
                {
                  content: 'my info',
                  onClick: () => {
                    console.log('my info');
                  },
                },
              ],
            }}
          />
        )}
      ></ConversationList>
    </div>
  );
};

image

设置用户的头像和昵称

  • 使用 renderItem 方法来渲染每个会话条目。
  • 使用 ConversationItem 组件的属性自定义组件。
import React from 'react';
import { ConversationList, ConversationItem, Avatar } from 'easemob-chat-uikit';
import 'easemob-chat-uikit/style.css';
import './index.css';

const Conversation = () => {
  // 在单聊中，将对端用户的用户 ID 与其用户昵称进行映射。
  const idToName = {
    userId1: 'name1',
    zd2: 'Henry 2',
  };
  return (
    <div style={{ width: '30%', height: '100%' }}>
      <ConversationList
        className="conversation"
        renderItem={cvs => {
          return (
            <ConversationItem
              avatar={
                <Avatar
                  size="normal"
                  shape="square"
                  style={{ background: 'yellow', color: 'black' }}
                >
                  {idToName[cvs.conversationId] || cvs.conversationId}
                </Avatar>
              }
              data={{
                ...cvs,
                name: idToName[cvs.conversationId] || cvs.conversationId,
              }}
            />
          );
        }}
      ></ConversationList>
      />
    </div>
  );
};

image

添加和置顶会话

使用 conversationStore 提供的方法，例如:

  • 使用 topConversation 方法置顶一个会话。
  • 使用 addConversation 方法添加一个会话。
import React from 'react';
import { ConversationList, ConversationItem, rootStore, Button } from 'easemob-chat-uikit';
import 'easemob-chat-uikit/style.css';

const Conversation = () => {
  // Pins a conversation.
  const topConversation = () => {
    rootStore.conversationStore.topConversation({
      chatType: 'singleChat', // For group chats, the value is `groupChat`.
      conversationId: 'userID', // Enter a conversation ID obtained from your conversation list.
      lastMessage: {},
    });
  };

  // Creates a new conversation.
  const createConversation = () => {
    rootStore.conversationStore.addConversation({
      chatType: 'singleChat',
      conversationId: 'conversationId',
      lastMessage: {},
      unreadCount: 3,
    });
  };
  return (
    <div style={{ width: '30%', height: '100%' }}>
      <ConversationList
        renderItem={cvs => {
          return (
            <ConversationItem
              moreAction={{
                visible: true,
                actions: [
                  {
                    // UIKit provides the conversation deletion event by default.
                    content: 'DELETE',
                  },
                  {
                    content: 'Top Conversation',
                    onClick: topConversation,
                  },
                ],
              }}
            />
          );
        }}
      ></ConversationList>
      <div>
        <Button onClick={createConversation}>create conversation</Button>
      </div>
    </div>
  );
};

image

ConversationList 属性总览

ConversationList 组件包含以下属性：

参数 类型 描述
className String 组件的类名
prefix String CSS 类名的前缀
headerProps HeaderProps Header 组件的参数
itemProps ConversationItemProps ConversationItem 组件的参数
renderHeader () => React.ReactNode 自定义渲染 Header 组件的方法
renderSearch () => React.ReactNode 自定义渲染 Search 组件的方法
onItemClick (data: ConversationData[0]) => void 点击会话列表中每个会话的回调事件
onSearch (e: React.ChangeEvent) => boolean 搜索输入框的 change 事件，当函数返回 false 时，会组织默认的搜索行为，你可以使用自己的搜索条件来搜索
Clone this wiki locally