文档反馈官招募中，报名立赚积分兑换代金券！> 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 与业务逻辑。您需要：
1. 在您的应用中配置 AnchorPage 的调用入口。
2. 实现页面跳转逻辑。
以下是一个简单的导航示例，AnchorPage 组件会自动创建直播间，您只需要传入以下回调参数：
onBack：返回上一页的回调。
onEndLive：直播结束的回调。
说明：
本示例使用 useState 进行简单的页面切换演示。在实际项目中，建议使用 React Navigation 等导航库进行页面管理。如需了解如何集成导航库，请参考 React Navigation 官方文档。
/**
 * 简单导航示例 - 使用 useState 管理页面跳转
 */
 
import React, { useState } from 'react';
import { AnchorPage } from 'react-native-tuikit-live';
import { View, Button, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

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

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

  // 开始直播
  const handleStartLive = () => {
    setCurrentPage('anchor');
  };

  // 从主播页返回
  const handleBackFromAnchor = () => {
    setCurrentPage('home');
  };

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

  return (
    <SafeAreaProvider>
      {currentPage === 'home' && (
        <View style={styles.container}>
          <Button title="开始直播" onPress={handleStartLive} />
        </View>
      )}

      {currentPage === 'anchor' && (
        <AnchorPage
          onBack={handleBackFromAnchor}
          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/link-host.png
底部操作栏的“连主播”图标。
/static/images/link-guest.png
底部操作栏的“连观众”图标。
/static/images/live-more.png
底部操作栏的“更多”图标。
/static/images/live-end.png
顶部操作栏的“结束直播”图标。
修改完成后，重新构建并运行应用，即可看到更新的图标。

文案定制

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

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

新增按钮

这里以底部栏新增“商品”按钮为例，您可以直接编辑 live/src/pages/Anchor/index.tsx 进行按钮的新增。
// 其他代码
<View>
    .......
    {/* 底部操作栏 */}
    <TouchableOpacity
       style={styles.actionButtonItem}
       onPress={() => showCoGuestPanel('requests')}
       activeOpacity={0.7}>
       {/* 图片地址可以替换为您的资源地址 */}
       <Image
         source={require('/static/images/link-guest.png')} 
         style={styles.actionButtonIcon}
         resizeMode="contain"
       />
       <Text style={styles.actionButtonText}>{商品}</Text>
     </TouchableOpacity>
</View>
最终效果：


隐藏按钮

您可以直接编辑对应文件的源码文件进行按钮的隐藏。这里以底部栏“连主播”按钮为例：
{/* <TouchableOpacity
    style={styles.actionButtonItem}
    onPress={showCoHostPanel}
    activeOpacity={0.7}>
    <Image
      source={require('react-native-tuikit-atomic-x/src/static/images/link-host.png')}
      style={styles.actionButtonIcon}
      resizeMode="contain"
    />
    <Text style={styles.actionButtonText}>{t('anchor.linkHost')}</Text>
    </TouchableOpacity> */}

下一步

恭喜您，现在您已经成功集成了主播开播。接下来，您可以实现观众观看、直播列表等功能，可参考下表：
功能
描述
集成指引
观众观看
实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。
观众观看
直播列表
展示直播列表界面和功能，包含直播列表和房间信息展示功能。
直播列表

常见问题

主播开播一段时间后，视频画面突然显示黑屏？

请排查一下是否有相同 userID 在其他设备上登录。请确保无论是观众端还是主播端所登录的账号不会被其他人使用，不然当账号在别的设备上登录后就会出现观看或者直播黑屏的情况。
中国站
目录