本文将指导您如何快速集成直播列表页，体验查看直播列表以及预览直播间信息功能。
功能预览
快速接入
步骤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' && (<LiveListPageonBack={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 改成 1groups.push(filteredLiveList.slice(i, i + 1)); // 把 2 改成 1}return groups;}, [filteredLiveList]);
最终效果：
下一步
恭喜您，现在您已经成功集成了 直播列表 功能。接下来，您可以实现主播开播、观众观看等功能，可参考下表：
