自定义通讯录界面 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}/>
-
效果比对
默认自定义后
自定义好友列表头部内容
- 示例代码
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}
/>
-
效果比对
默认自定义后
自定义打招呼消息
-
示例代码
<ContactInfoContainer //... afterAcceptApplyFriend={(account) => { store.msgStore .sendTextMsgActive({ scene: 'p2p', to: account, body: t('passFriendAskText'), }) .then(() => { setModel('chat') }) }} />
-
效果比对
默认自定义后
相关图例
本节介绍通讯录界面的部分默认展示内容。
好友列表为空时的内容
黑名单列表为空时的内容
黑名单列表头部内容
群组列表为空时的内容
群组列表头部内容
消息中心为空时的内容
消息中心头部内容
通讯录为空时的内容
此文档是否对你有帮助?