TUIKit 默认实现了文本、图片、语音、视频、文件等基本消息类型的发送和展示,如果这些消息类型满足不了您的需求,您可以新增自定义消息类型。
基本消息类型
消息类型 | 显示效果图 |
文本类消息 | |
图片类消息 | |
语音类消息 | |
视频类消息 | |
文件类消息 | |
自定义消息
如果基本消息类型不能满足您的需求,您可以根据实际业务需求自定义消息。
自定义类消息和其他普通类型消息接收方式一致,所有类型消息都通过监听 onRecvNewMessage 事件来获取。
收到的自定义消息根据相应的具体类型字段以不同的形式展示在消息列表中 。
下面我们讲解下如何展示自定义消息。
创建自定义消息展示结构
您可以在路径
src/TUIKit/components/TUIMessage/element/custom_element.tsx
文件下新增您需要的自定义消息展示结构样式。import React from 'react';import {Text} from 'react-native';import type {V2TimMessage} from 'react-native-tim-js/lib/typescript/src/interface';export const CustomElement = (props: {message: V2TimMessage}) => {const {message} = props; //message包含了当前自定义消息的所有属性,您可以根据自定义需求来更改渲染结果。console.log(message);return <Text>["自定义消息"]</Text>;};
发送自定义消息
import { TencentImSDKPlugin } from 'react-native-tim-js';// 创建自定义消息const createCustomMessageRes = await TencentImSDKPlugin.v2TIMManager.getMessageManager().createCustomMessage({data: '自定义data',desc: '自定义desc',extension: '自定义extension',});if (createCustomMessageRes.code === 0) {const id = createCustomMessageRes.data?.id;// 发送自定义消息// 在sendMessage时,若只填写receiver则发个人用户单聊消息// 若只填写groupID则发群组消息// 若填写了receiver与groupID则发群内的个人用户,消息在群聊中显示,只有指定receiver能看见const sendMessageRes = await TencentImSDKPlugin.v2TIMManager.getMessageManager().sendMessage({ id: id!, receiver: 'userID', groupID: 'groupID' });if (sendMessageRes.code === 0) {// 发送成功sendMessageRes.data?.customElem?.data; //自定义datasendMessageRes.data?.customElem?.desc; //自定义descsendMessageRes.data?.customElem?.extension; //自定义extension}}
交流与反馈