即时通信 IM 直播列表（React Native）

一、步骤1：开通服务

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

二、步骤2：代码集成

1. 参考准备工作接入 TUILiveKit。

2. 确保你的项目中你已经安装 react-native-safe-area-context，如未安装，运行下列命令进行安装：

yarn add react-native-safe-area-context

三、步骤3：添加直播列表页面

TUILiveKit 已内置了直播场景的直播列表相关完整 UI 与业务逻辑。你只需要配置 LiveListPage 的调用入口（具体由你的业务决定），执行如下操作，跳转到直播列表页面。

注意：说明：

注意：本示例使用 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 { LiveListPage } from 'react-native-tuikit-live';type PageType = 'home' | 'liveList' | 'liveEnd' | 'liveAudience';function MyApp() { const [currentPage, setCurrentPage] = useState<PageType>('home'); // 跳转到直播列表页面 const handleJumpLiveList = async () => { setCurrentPage('liveList'); }; // 从直播列表页返回 const handleBackFromLiveList = () => { setCurrentPage('home'); }; return ( <SafeAreaProvider> {currentPage === 'home' && ( <View style={styles.container}> <Button title="进入直播列表" onPress={handleJumpLiveList} /> </View> )} {currentPage === 'liveList' && ( <LiveListPage onBack={handleBackFromLiveList} /> )} {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 支持灵活定制直播列表页的功能和样式，你可根据业务需求调整布局。

五、修改每行展示直播间数量

通过设置每行展示的元素数量来修改每行展示的直播间数量，修改 tuikit-atomic-x/src/components/LiveList.tsx 文件。

默认逻辑如下：

const CARD_WIDTH = (SCREEN_WIDTH – CONTAINER_PADDING * 2 – CARD_GAP) / 2; // 一行两个// 将直播列表分组，每行两个元素const groupedLiveList = useMemo(() => { const groups: LiveInfoParam[][] = []; for (let i = 0; i < filteredLiveList.length; i += 2) { groups.push(filteredLiveList.slice(i, i + 2)); } return groups;}, [filteredLiveList]);

修改每行展示的直播间数量，示例为每行展示一个：

const CARD_WIDTH = (SCREEN_WIDTH – CONTAINER_PADDING * 2); // 一行一个const groupedLiveList = useMemo(() => { const groups: LiveInfoParam[][] = []; for (let i = 0; i < filteredLiveList.length; i += 1) { // 把 2 改成 1 groups.push(filteredLiveList.slice(i, i + 1)); // 把 2 改成 1 } return groups;}, [filteredLiveList]);

最终效果：

六、下一步

恭喜你，现在你已经成功集成了直播列表功能。接下来，你可以实现主播开播、观众观看等功能，可参考下表：

功能	描述	集成指引
主播开播	实现主播开播全流程功能，包括开播前的准备和开播后的各种互动。	主播开播
观众观看	实现观众进入主播的直播间后观看直播，实现观众连麦、直播间信息、在线观众、弹幕显示等功能。	观众观看

七、集成直播列表功能后页面没有任何直播怎么办？

如果你看到空白页面，需要检查你是否已完成登录步骤。为了测试该功能，你可以使用两台设备：一台设备用于开播，另一台设备在直播列表页面，就能拉取到已开播的直播间。