通讯录组件（contact-kit）主要功能为显示当前用户的好友、黑名单以及群组关系。

界面效果

通讯录组件由 2 个子组件组成：

• ContactList ：关系导航组件
• ContactInfo ：关系详情组件，内部包含了好友列表、群组列表以及黑名单列表

界面集成

在您的 React 项目中导入关系导航组件和关系详情组件，并配置界面相关设置（宽高、宽高比、位置），即可集成 IM UIKit 默认的通讯录界面。

示例代码如下：

import React from 'react'
import { ContactListContainer, ContactInfoContainer } from '@xkit-yx/im-kit-ui'

import '@xkit-yx/im-kit-ui/es/style'

const Page1 = () => {
  return (
    <div
      style={{
        display: 'flex',
        width: 1000,
        height: 400,
        alignItems: 'center',
      }}
    >
      <div style={{ width: 300, height: '100%' }}>
        <ContactListContainer />
      </div>
      <div style={{ flex: 1, height: '100%', overflowY: 'auto' }}>
        <ContactInfoContainer />
      </div>
    </div>
  )
}

IM UIKit 默认的通讯录界面，支持如下功能：

• 单击用户头像查看用户资料卡片
• 在用户资料卡片页面中拉黑/解除拉黑好友

相关信息

如果默认界面无法满足您的业务需求，您可参照自定义通讯录界面 UI 进行自定义。