腾讯云即时通信IMReact Native_AI解决方案_同尘科技

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 ["自定义消息"];};

发送自定义消息

您可以通过调用 createCustomMessage 方法来发送一条自定义消息。 您可以通过构建不同的 data 数据项来实现发送不同类型的自定义消息。
发送自定义消息示例代码如下：

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; //自定义data        sendMessageRes.data?.customElem?.desc; //自定义desc        sendMessageRes.data?.customElem?.extension; //自定义extension    }}

交流与反馈

点此进入IM社群，享有专业工程师的支持，解决您的难题

对即时通讯IM解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案