文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊 SDK>含 UI 集成>视频直播>观众观看>观众观看 （React Native）

观众观看 （React Native）

最近更新时间：2026-01-16 19:45:12

我的收藏

本页目录：

本文将介绍如何快速集成观众观看页，体验观众进入主播的直播间后观看直播、观众连麦 、查看直播间信息、查看在线观众、发送礼物、点赞，弹幕互动等功能。

功能预览

观众观看页提供默认的行为和样式，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。


快速接入

步骤1：开通服务

参考 开通服务 文档开通体验版或大规模直播版套餐。

步骤2：代码集成

1. 参考 准备工作 接入 TUILiveKit。
2. 确保您的项目中已经安装 react-native-safe-area-context，如未安装，运行下列命令进行安装：
yarn add react-native-safe-area-context

步骤3：添加观众观看页面

react-native-tuikit-live 已内置了直播场景的观众端完整 UI 与业务逻辑。您只需要配置 LiveAudiencePage 的调用入口（具体由您的业务决定），执行如下操作，跳转到观众观看页面。
说明：
本示例使用 useState 进行简单的页面切换演示。在实际项目中，建议使用 React Navigation 等导航库进行页面管理。如需了解如何集成导航库，请参考 React Navigation 官方文档。
/**
 * 简单导航示例 - 使用 useState 管理页面跳转
 */
import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { LiveAudiencePage } from 'react-native-tuikit-live';
import { useLiveListState } from 'react-native-tuikit-atomic-x';

type PageType = 'home' | 'liveAudience' | 'liveEnd';

function MyApp() {

  // 实际业务中，liveID 通常来自：
  // 1. 从直播列表页面点击进入时传递的参数
  // 2. 从路由参数中获取
  // 3. 从服务器接口获取
  // 此处使用 '1234' 仅作为示例
  const liveID = '1234'
  const { joinLive } = useLiveListState(liveID)

  const [currentPage, setCurrentPage] = useState<PageType>('home');
  const [endedLiveID, setEndedLiveID] = useState<string>('');


  // 跳转到观众观看页面
  const handleJumpLiveAudience = async () => {
    await joinLive({
      liveID,
      onSuccess: () => {
        setCurrentPage('liveAudience');
      },
      onError: (error) => {
        console.error('加入直播间失败:', error);
        // 处理错误，如提示用户
      }
    })
  };

  // 从观众观看页面返回
  const handleBackFromAudience = () => {
    setCurrentPage('home');
  };

  // 直播结束
  const handleEndLive = (liveID?: string) => {
    setEndedLiveID(liveID || '');
    setCurrentPage('liveEnd');
  };

  return (
    <SafeAreaProvider>
      {currentPage === 'home' && (
        <View style={styles.container}>
          <Button title="进入观众观看" onPress={handleJumpLiveAudience} />
        </View>
      )}

      {currentPage === 'liveAudience' && (
        <LiveAudiencePage
          onBack={handleBackFromAudience}
          onEndLive={handleEndLive}
        />
      )}

      {currentPage === 'liveEnd' && (
        <View style={styles.container}>
          <Button title="返回首页" onPress={() => setCurrentPage('home')} />
        </View>
      )}
    </SafeAreaProvider>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});


export default MyApp;


自定义界面布局

TUILiveKit 支持灵活定制观众观看页的功能和样式，您可根据业务需求调整布局。

图标定制

TUILiveKit 用到的所有图标都存放于 tuikit-atomic-x/src/static/images 目录下，部分示例如下，您可以根据您的诉求来替换目录下的图标。
图标路径
详细描述
/static/images/dashboard.png
底部操作栏的“仪表盘”图标。
/static/images/link-guest.png
底部操作栏的“申请连麦”图标。
/static/images/live-gift.png
底部操作栏的“礼物”图标。
/static/images/live-like.png
底部操作栏的“点赞”图标。
/static/images/close.png
顶部操作栏的“离开直播间”图标。
重新构建并运行应用，即可看到更新的图标。

文案定制

TUILiveKit 的 UI 文案显示有统一文件管理。您可以直接编辑 tuikit-atomic-x/src/locales/ 目录下的 json 文件来修改需要调整的文案。

zh.json - 中文文案
en.json - 英文文案
重新构建并运行应用，即可看到更新的文案。

新增按钮

下方以视频区域左上角新增“点赞数量”按钮为例, 您可以直接编辑live/src/pages/LiveAudience/index.tsx进行按钮的新增。

<View style={{ flex: 1 }}>
  {/* ...其他内容... */}
  
  <View 
    style={{
      position: 'absolute',
      top: 100,
      left: 15,
      width: 100,
      height: 30,
      backgroundColor: 'rgba(0, 0, 0, 0.3)',
      borderRadius: 22.5,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
      {/* 图片地址可以替换为您的资源地址 */}
    <Image
      style={{ width: 18, height: 18 }}
      source={require('/static/images/gift_heart0.png')}
      resizeMode="contain"
    />
    <Text style={{ color: '#fff', fontSize: 12 }}>8888</Text>
  </View>
</View>
最终效果：


隐藏按钮

隐藏按钮可以通过注释代码的方式来直接隐藏，下方以“礼物”的按钮为例：
{/* <TouchableOpacity
    style={styles.actionBtn}
    onPress={showGiftPicker}
    activeOpacity={0.7}>
    <Image
      source={require('react-native-tuikit-atomic-x/src/static/images/live-gift.png')}
      style={styles.actionBtnIcon}
      resizeMode="contain"
    />
    </TouchableOpacity> */}

下一步

恭喜您，现在您已经成功集成了观众观看功能。接下来，您可以实现主播开播、直播列表等功能，可参考下表：
功能
描述
集成指引
主播开播
主播开播全流程功能，包括开播前的准备和开播后的各种互动。
主播开播
直播列表
展示直播列表界面和功能，包含直播列表，房间信息展示功能。
直播列表

常见问题

观众发送弹幕时，直播间内其他观众看不到弹幕内容？

原因 1：先检查网络连接，确保观众设备网络正常。
原因 2：该观众被主播禁言，无法发送弹幕。
原因 3：观众的弹幕内容涉及关键词屏蔽，请确认观众发送的弹幕内容是否符合直播间规则。

如何展示观众等级？

您的业务中若是有需要展示观众等级的需求，可以在目标位置插入对应的元素用于展示观众等级，这里以观众列表展示观众等级为例。在 tuikit-atomic-x/src/components/LiveAudienceList.tsx组件中找到观众信息展示的代码，并在其中插入观众等级展示代码。
<View style={styles.audienceInfo}>
    .......
   {/* 观众等级 */}
   <Text style={styles.audienceLevel}>{level}</Text>
    <View style={styles.audienceAvatarContainer}>
        <Image source={{ uri: avatarURL }} style={styles.audienceAvatar} />
    </View>
</View>

中国站
目录