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

自定义参数概览

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

自定义示例

自定义通讯录内容

• 查看在线示例

  在 IMAppProps 传入正确的 appkey、account 和 token 即可在线预览效果。

• 示例代码

  React

  jsx/tsxconst 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}/>
  

  Vue2/Vue3

  js/ts<template>
      <div ref="contactList" />
  </template>
  
  <script>
      ...
        mounted() {
            this.$uikit.render(
            ContactListContainer,
            {
            renderCustomContact:(contactType) => {
                  console.log('==========renderCustomContact===========', contactType);
                  const handleItemClick = (contactType) => {
                    const { store, nim } = window.__xkit_store__
                    store.uiStore.selectContactType(contactType)
                    if (contactType === 'msgList') {
                      store.sysMsgStore.resetSystemMsgUnread()
                    }
                  }
                  if( contactType === 'msgList'){
                    return compile(`<div className='msg-list-wrapper' onClick={() => context.handleItemClick(context.contactType)}>
                      <div className='msg-list-text'>消息中心</div>
                    </div>`, { handleItemClick, contactType })
                  }else{
                    return null
                  }
                }
            },
            this.$refs.contactList
          );
        }
  </script>
  

• 示例代码解读

  上述示例中的 contactType 可获取到四种类型，分别为 'blackList'（黑名单） | 'groupList'（我的群组）| 'friendList'（我的好友） | 'msgList'（消息中心）， 可根据不同 contactType 自定义渲染逻辑，若 renderCustomContact 返回为 null，则使用组件默认渲染逻辑。

• 效果比对

  默认	自定义后

在集成通讯录组件时，如果不需要展示群组，您可在 contactType 为 'groupList' 时，return 一个空 div 即可，其余 contactType return null， 使用默认渲染逻辑。

jsx/tsx<ContactListContainer
      renderCustomContact={(contactType) => {
        console.log(
          "==========renderCustomContact===========",
          contactType
        );
        if (contactType === "groupList") {
          return <div></div>;
        } else {
          return null;
        }
      }}
  />

js/ts<template>
     <div ref="contactList" />
</template>

<script>
     ...
      mounted() {
          this.$uikit.render(
          ContactListContainer,
          {
            renderCustomContact: (contactType) => {
                console.log('==========renderCustomContact===========', contactType);
                if( contactType === 'groupList'){
                  return compile(`<div></div>`)
                }else{
                  return null
                }
              }
          },
          this.$refs.contactList
        );
      }
</script>

自定义好友列表头部内容

• 查看在线示例

  在 IMAppProps 传入正确的 appkey、account 和 token 即可在线预览效果。

• 示例代码

  React

  jsx/tsxconst 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}
    />
  

  Vue2/Vue3

  js/ts<template>
      <div ref="contactInfo" />
  </template>
  
  <script>
      ...
        mounted() {
            this.$uikit.render(
            ContactInfoContainer,
            {
              renderFriendListHeader: () => {
                return compile(
                  `<div style={{ display: 'flex' }}>
                    <img src="https://yx-web-nosdn.netease.im/common/71a3ab830b7c8171580dad6ac2885fd6/邀请好友.png" alt="" />
                    <div>我的好友</div>
                  </div>`
                )
              }
            },
            this.$refs.contactInfo
          );
        }
  </script>
  

  renderBlackListHeader、renderGroupListHeader、renderMsgListHeader 同理。

• 效果比对

  默认	自定义后

自定义打招呼消息

• 查看在线示例

  在 IMAppProps 传入正确的 appkey、account 和 token 即可在线预览效果。

• 示例代码

  React

  jsx/tsx<ContactInfoContainer
        //...
        afterAcceptApplyFriend={(account) => {
          store.msgStore
            .sendTextMsgActive({
              scene: 'p2p',
              to: account,
              body: t('passFriendAskText'),
            })
            .then(() => {
              setModel('chat')
            })
        }}
      />
  

  Vue2/Vue3

  js/ts<template>
      <div ref="contactInfo" />
  </template>
  
  <script>
      ...
        mounted() {
            this.$uikit.render(
            ContactInfoContainer,
            {
              afterAcceptApplyFriend: (account) => {
                const { store, nim } = window.__xkit_store__
                store.msgStore
                  .sendTextMsgActive({
                    scene: 'p2p',
                    to: account,
                    body: '我已经同意了你的申请，现在开始聊天吧~',
                  })
                  .then(() => {
                    this.model = "chat";
              })
            },
            this.$refs.contactInfo
          );
        }
  </script>
  

• 效果比对

  默认	自定义后

相关图例

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

好友列表为空时的内容

黑名单列表为空时的内容

黑名单列表头部内容

群组列表为空时的内容

群组列表头部内容

消息中心为空时的内容

消息中心头部内容

通讯录为空时的内容