即时通信 IM 主播开播（React Native）

一、功能预览

主播开播页提供默认的行为和样式，但如果默认行为和样式不能完全满足你的需求，你也可以对 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 目录下，部分示例如下，你可以根据实际需求替换目录下的图标。

修改完成后，重新构建并运行应用，即可看到更新的图标。

七、文案定制

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 在其他设备上登录。请确保无论是观众端还是主播端所登录的账号不会被其他人使用，不然当账号在别的设备上登录后就会出现观看或者直播黑屏的情况。