即时通信 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 与业务逻辑。你只需要配置 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 目录下，部分示例如下，你可以根据你的诉求来替换目录下的图标。

重新构建并运行应用，即可看到更新的图标。

七、文案定制

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>