自定义会话列表界面 UI
更新时间: 2023/07/21 06:56:54
如果默认会话列表界面无法满足您的业务需求,您可通过会话列表组件的自定义参数进行界面自定义。
自定义参数概览
会话列表组件(conversation-kit
)提供的自定义参数如下:
参数 |
类型 | 说明 |
---|---|---|
renderSessionListEmpty |
(() => Element) |
自定义渲染会话列表为空时的内容,具体示例参见自定义“会话列表为空时的内容” |
renderCustomP2pSession |
(options: {session: NimKitCoreTypes.ISession} & ConversationCallbackProps) => JSX.Element | null | undefined |
自定义渲染会话类型是单聊的内容,具体示例参见自定义会话的展示内容 |
renderCustomTeamSession |
(options: {session: NimKitCoreTypes.ISession} & Omit<ConversationCallbackProps, 'onSessionItemMuteChange'>) => JSX.Element | null | undefined |
自定义渲染会话类型是群聊的内容,,具体示例参见自定义会话的展示内容 |
renderSessionName |
((options: { session: ISession; }) => Element | null) |
自定义渲染会话名称。如果单聊会话定义了 renderCustomP2pSession 或群组会话定义了 renderCustomTeamSession 则不生效。具体示例参见自定义会话元素 |
renderSessionMsg |
((options: { session: ISession; }) => Element | null) |
自定义渲染会话消息。如果单聊会话定义了 renderCustomP2pSession 或群组会话定义了 renderCustomTeamSession 则不生效 |
renderP2pSessionAvatar |
((options: { session: ISession; }) => Element | null) |
自定义渲染单聊会话头像。如果定义了 renderCustomP2pSession 则不生效 |
renderTeamSessionAvatar |
((options: { session: ISession; }) => Element | null) |
自定义渲染群聊会话头像。如果定义了 renderCustomTeamSession 则不生效 |
prefix |
string | 样式前缀,默认值为"conversation" |
commonPrefix |
string | 公共样式前缀,默认值为"common" |
onSessionItemClick |
((id: string) => void) |
会话点击事件 |
onSessionItemDeleteClick |
((id: string) => void) |
会话删除事件 |
onSessionItemStickTopChange |
((id: string, isTop: boolean) => void) |
会话置顶状态改变事件 |
onSessionItemMuteChange |
((id: string, mute: boolean) => void) |
会话免打扰状态改变事件 |
自定义示例
自定义“会话列表为空时的内容”
-
在
IMAppProps
传入正确的appkey
、account
和token
即可在线预览效果。 -
示例代码
const renderSessionListEmpty = () => { return ( <div> <img style={{width: '100%'}} src='https://yx-web-nosdn.netease.im/common/2946c48f29d747305e68b1ddf27f3472/无成员可添加@3x.png'/> <div className='no-session'>暂无会话</div> </div> ) } <ConversationContainer renderSessionListEmpty={renderSessionListEmpty}/>
-
效果对比
默认自定义后
自定义会话的展示内容
您可自定义会话列表中某个会话对象的头像、昵称以及最后一条消息的展示。
-
在
IMAppProps
传入正确的appkey
、account
和token
即可在线预览效果。 -
示例代码
import { ComplexAvatarContainer } from '@xkit-yx/im-kit-ui' //全局上下文 const { store } = useStateContext() const renderCustomP2pSession = (options) => { return ( <div className='session-item' onClick={() => options.onSessionItemClick(options.session)}> <img className='avatar' src={options.session.avatar}/> <div > <div className='nick'>{store.uiStore.getAppellation({account: options.session.account})}</div> <div className='msg-body'>{options.session.lastMsg.body}</div> </div> </div> ) } <ConversationContainer renderCustomP2pSession={renderCustomP2pSession} />
-
示例代码解读
上述示例代码的
const renderCustomP2pSession = (options) => {}
中,options
的定义为options: {session: NimKitCoreTypes.ISession} & ConversationCallbackProps)
,其中ISession
和ConversationCallbackProps
的定义如下:type ISession = P2PSession | TeamSession; // 会话类型,P2PSession表示单聊,TeamSession表示群聊 type ConversationCallbackProps = { /* 点击事件 */ onSessionItemClick: (session: NimKitCoreTypes.ISession) => void; /* 右键删除事件 */ onSessionItemDeleteClick: (session: NimKitCoreTypes.ISession) => void; /* 右键置顶事件 */ onSessionItemStickTopChange: (session: NimKitCoreTypes.ISession, isTop: boolean) => void; /* 右键静音事件 */ onSessionItemMuteChange: (session: NimKitCoreTypes.ISession, mute: boolean) => void; }
-
效果对比
默认自定义后
自定义会话元素
可自定义的会话元素包括会话名称、会话消息、单聊会话头像和群聊会话头像。
下文以自定义渲染会话名称为例,介绍的如何在所有会话的名称前都加上“云信”。
-
在
IMAppProps
传入正确的appkey
、account
和token
即可在线预览效果。 -
示例代码
import { ComplexAvatarContainer } from '@xkit-yx/im-kit-ui' //全局上下文 const { store } = useStateContext() const renderSessionName = (options) => { return ( <div style={{fontWeight: 'bold'}}>云信-{store.uiStore.getAppellation({account: options.session.account})}</div> ) } <ConversationContainer renderSessionName={renderSessionName} />
-
效果对比
默认自定义后
此文档是否对你有帮助?