Web

自定义通讯录界面 UI

更新时间: 2024/03/14 19:21:16

如果默认通讯录界面(contact-kit)无法满足您的业务需求,您可通过本节介绍的参数进行界面自定义。

自定义参数概览

contact-kit提供的自定义参数如下:

参数
类型 说明 子组件
renderCustomContact ((contactType: ContactType) => Element) 自定义渲染通讯录内容,具体示例参见下文的自定义渲染通讯录内容 关系导航组件
prefix string 样式前缀,默认值为"contact"
onItemClick ((contactType: ContactType) => void) 通讯录导航点击事件
renderFriendListEmpty (() => Element) 自定义渲染好友列表为空时的内容 关系详情组件
renderFriendListHeader (() => Element) 自定义渲染好友列表头部内容,具体示例参见下文的自定义好友列表头部内容
renderBlackListEmpty (() => Element) 自定义渲染黑名单列表为空时的内容
renderBlackListHeader (() => Element) 自定义渲染黑名单列表头部内容
renderGroupListEmpty (() => Element) 自定义渲染群组列表为空时的内容
renderGroupListHeader (() => Element) 自定义渲染群组列表头部内容
renderMsgListEmpty (() => Element) 自定义渲染消息中心为空时的内容
renderMsgListHeader (() => Element) 自定义渲染消息中心头部内容
renderEmpty (() => Element) 自定义渲染通讯录为空时的内容
afterSendMsgClick (() => void) 点击发送消息后的事件,例如在同意好友申请后,可自定义渲染打招呼消息
onFriendItemClick ((account: string) => void) 点击好友的事件
onGroupItemClick ((team: Team) => void) 群组点击事件
onBlackItemClick ((account: string) => void) 黑名单点击事件
prefix string 样式前缀,默认值:"contact"
commonPrefix string 公共样式前缀,默认值:"common"

自定义示例

自定义通讯录内容

  • 示例代码

    const handleItemClick = (contactType) => {
      store.uiStore.selectContactType(contactType)
      if (contactType === 'msgList') {
        store.sysMsgStore.resetSystemMsgUnread()
      }
    }
    
    const renderCustomContact = (contactType) => {
      return contactType == 'msgList' ? (
        <div className='msg-list-wrapper' onClick={() => handleItemClick(contactType)}>
          <img className='msg-list' src="https://yx-web-nosdn.netease.im/common/67be494eeca64db51d2013cc682b0f93/75573bd7b485f23.jpeg" alt="" />
          <div className='msg-list-text'>消息中心</div>
        </div>
      ) : null
    }
    
    <ContactListContainer renderCustomContact={renderCustomContact}/>
    
  • 效果比对

    默认
    自定义后
    通讯录内容.png 通讯录内容自定义1.png

自定义好友列表头部内容

  • 示例代码
const renderFriendListHeader = () => {
   return (
    <div className='friend-header'>
      <img className='friend' src="https://yx-web-nosdn.netease.im/common/71a3ab830b7c8171580dad6ac2885fd6/邀请好友.png" alt="" />
      <div className='friend-text'>我的好友</div>
    </div>
   )
}

<ContactInfoContainer
    renderFriendListHeader={renderFriendListHeader}
  />
  • 效果比对

    默认
    自定义后
    好友列表头部.png 好友列表头部内容自定义后1.png

自定义打招呼消息

  • 示例代码

    <ContactInfoContainer
          //...
          afterAcceptApplyFriend={(account) => {
            store.msgStore
              .sendTextMsgActive({
                scene: 'p2p',
                to: account,
                body: t('passFriendAskText'),
              })
              .then(() => {
                setModel('chat')
              })
          }}
        />
    
  • 效果比对

    默认
    自定义后
    web无打招呼.png web打招呼.png

相关图例

本节介绍通讯录界面的部分默认展示内容。

好友列表为空时的内容

黑名单列表为空时的内容

黑名单列表头部内容

群组列表为空时的内容

群组列表头部内容

消息中心为空时的内容

消息中心头部内容

通讯录为空时的内容

此文档是否对你有帮助?
有帮助
去反馈
  • 自定义参数概览
  • 自定义示例
  • 自定义通讯录内容
  • 自定义好友列表头部内容
  • 自定义打招呼消息
  • 相关图例
  • 好友列表为空时的内容
  • 黑名单列表为空时的内容
  • 黑名单列表头部内容
  • 群组列表为空时的内容
  • 群组列表头部内容
  • 消息中心为空时的内容
  • 消息中心头部内容
  • 通讯录为空时的内容