弹幕（React Native）

import { useEffect } from 'react';
import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// 通过 liveID 获取 BarrageState 的实例
const { messageList } = useBarrageState(liveID);

// 监听 messageList 的实时变更，用于驱动 UI 更新
useEffect(() => {
  console.log(messageList);
}, [messageList]);

import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// 通过 liveID 获取 BarrageState 的实例
const { sendTextMessage } = useBarrageState(liveID);

const sendMessage = () => {
  sendTextMessage({
    liveID: liveID, // 当前直播间的 liveID
    text: 'xxx', // 您想要发送的弹幕
    onSuccess: () => {
      console.log('弹幕发送成功');
    },
    onError: (error) => {
      console.log('弹幕发送失败', error);
    },
  });
};

import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// 通过 liveID 获取 BarrageState 的实例
const { sendCustomMessage } = useBarrageState(liveID);

// 发送一条自定义弹幕，例如用于发送礼物
const sendGiftMessage = (giftID, giftCount) => {
  // 1. 定义一个能识别业务的 ID
  const businessID = 'live_gift';
  // 2. 将业务数据编码为 JSON 字符串
  const giftData = { gift_id: giftID, gift_count: giftCount };
  // 3. 调用核心 API 发送自定义消息
  sendCustomMessage({
    liveID: liveID, // 当前直播间的 liveID
    businessID,
    data: JSON.stringify(giftData),
    onSuccess: () => {
      console.log('礼物消息发送成功');
    },
    onError: (error) => {
      console.log('礼物消息发送失败', error);
    },
  });
};

import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// 通过 liveID 获取 BarrageState 的实例
const { appendLocalTip } = useBarrageState(liveID);

const showWelcomeMessage = (user) => {
  appendLocalTip({
    liveID: liveID, // 当前直播间的 liveID
    message: {
      textContent: `欢迎 ${user.userName} 进入直播间！`,
      sender: {
        userID: user.userID || '',
        userName: user.userName || '',
        avatarURL: user.avatarURL || '',
      },
      messageType: 0,
      sequence: Math.floor(Date.now() / 1000),
      timestampInSecond: Math.floor(Date.now() / 1000),
      liveID: liveID,
    },
    onSuccess: () => {
      console.log('插入本地消息成功');
    },
    onError: (error) => {
      console.log('插入本地消息失败', error);
    },
  });
};

import { useLiveAudienceState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveAudienceState';

// 通过 liveID 获取 LiveAudienceState 的实例
const { disableSendMessage } = useLiveAudienceState(liveID);

// 定义要操作的用户 ID 和禁言状态
const userIdToMute = 'user_id_to_be_muted'; // 想要操作的用户 userID
const shouldDisable = true; // true 为禁言, false 为解禁

// 调用接口执行操作
const toggleMuteUser = () => {
  disableSendMessage({
    liveID: liveID, // 当前直播间 liveID
    userID: userIdToMute,
    isDisable: shouldDisable,
    onSuccess: () => {
      console.log(`${shouldDisable ? '禁言' : '解禁'}用户 ${userIdToMute} 成功`);
    },
    onError: (error) => {
      console.log('操作失败', error);
    },
  });
};

import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';
import { LiveInfoModifyFlag } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState/types';

// 1. 获取 LiveListState 的实例
const { updateLiveInfo, currentLive } = useLiveListState();

// 2. 获取当前直播间信息，并修改全体禁言状态
const isCurrentlyMuted = currentLive?.isMessageDisable || false;

// 3. 调用更新接口，并指定修改的标志位
const toggleMuteAll = () => {
  updateLiveInfo({
    liveInfo: { liveID: currentLive?.liveID, isMessageDisable: !isCurrentlyMuted },
    modifyFlagList: [LiveInfoModifyFlag.IS_MESSAGE_DISABLE],
    onSuccess: () => {
      console.log(`${!isCurrentlyMuted ? '全体禁言' : '取消禁言'}成功`);
    },
    onError: (error) => {
      console.log('操作失败', error);
    },
  });
};

import { useEffect, useRef, useState } from 'react';
import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// 通过 liveID 获取 BarrageState 的实例
const { messageList } = useBarrageState(liveID);

// UI 展示数据
const [displayMessageList, setDisplayMessageList] = useState([]);

// ===== 节流配置 =====
const THROTTLE_INTERVAL = 300; // 300毫秒节流阈值
const latestMessageListRef = useRef([]);
const throttleTimerRef = useRef(null);
const lastFlushTimeRef = useRef(0);

useEffect(() => {
  if (!messageList) return;
  // 缓存最新的完整列表（不触发渲染）
  latestMessageListRef.current = messageList;

  const now = Date.now();
  const timeSinceLastFlush = now - lastFlushTimeRef.current;

  // 如果距离上次刷新已经超过阈值，立即执行刷新
  if (timeSinceLastFlush >= THROTTLE_INTERVAL) {
    setDisplayMessageList([...latestMessageListRef.current]);
    lastFlushTimeRef.current = now;
  } else if (!throttleTimerRef.current) {
    // 只有没有定时器时才设，避免设置多个定时器
    const remainingTime = THROTTLE_INTERVAL - timeSinceLastFlush;
    throttleTimerRef.current = setTimeout(() => {
      setDisplayMessageList([...latestMessageListRef.current]);
      lastFlushTimeRef.current = Date.now();
      throttleTimerRef.current = null;
    }, remainingTime);
  }
  // 300ms 内的中间更新会被跳过，定时器到期时用最新数据刷新
}, [messageList]);

// 组件卸载时清理定时器
useEffect(() => {
  return () => {
    if (throttleTimerRef.current) {
      clearTimeout(throttleTimerRef.current);
    }
  };
}, []);

// 使用 displayMessageList 驱动 UI 渲染
// <FlatList data={displayMessageList} ... />

import { useEffect, useState } from 'react';
import { useBarrageState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BarrageState';

// 通过 liveID 获取 BarrageState 的实例
const { messageList } = useBarrageState(liveID);

// UI 展示数据
const [displayMessageList, setDisplayMessageList] = useState([]);

// ===== 消息窗口配置（只保留最新N条消息）=====
const MAX_MESSAGES_COUNT = 500;

// 裁剪消息列表：只保留最新的 MAX_MESSAGES_COUNT 条消息
const trimMessageList = (messages) => {
  if (messages.length > MAX_MESSAGES_COUNT) {
    console.warn(
      `[BarrageList] 消息数量超过限制 ${MAX_MESSAGES_COUNT}，已删除 ${messages.length - MAX_MESSAGES_COUNT} 条最早消息`
    );
    return messages.slice(messages.length - MAX_MESSAGES_COUNT);
  }
  return messages;
};

// 监听 messageList 变化，裁剪后更新 UI
useEffect(() => {
  if (!messageList) return;
  setDisplayMessageList(trimMessageList([...messageList]));
}, [messageList]);

// 使用 displayMessageList 驱动 UI 渲染
// <FlatList data={displayMessageList} ... />