直播 SDK 直播列表（Web React）

一、步骤1：环境配置及开通服务

在进行快速接入之前，请参考 准备工作（Web React） 集成组件并实现登录。

二、步骤2：安装依赖

你可以选择以下任一方式安装依赖：

npmpnpmyarnnpm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react –savenpm install sass –save-devpnpm add tuikit-atomicx-react @tencentcloud/uikit-base-component-reactpnpm add sass –devyarn add tuikit-atomicx-react @tencentcloud/uikit-base-component-reactyarn add sass –dev

三、步骤3：接入直播列表页面

在你的项目下创建 LiveListView.tsx 和 LiveListView.module.scss 文件，可直接复制如下代码至你的项目中集成直播列表页面。

注意：你可以直接复制如下代码至你的代码工程中集成，也可以访问 观众观看 开源代码，查看完整的源码内容。

LiveListView.tsxLiveListView.module.scssimport React, { useEffect, useCallback } from 'react';import { useNavigate, useSearchParams } from 'react-router-dom';import { LiveList, useLoginState } from 'tuikit-atomicx-react';import type { LiveInfo } from 'tuikit-atomicx-react';import { UIKitProvider, MessageBox } from '@tencentcloud/uikit-base-component-react';import styles from './LiveListView.module.scss';const LiveListView: React.FC = () => { const navigate = useNavigate(); const [searchParams] = useSearchParams(); const { loginUserInfo, login, setSelfInfo } = useLoginState(); const handleLiveRoomClick = (liveInfo: LiveInfo) => { if (loginUserInfo?.userId === liveInfo.liveOwner?.userId) { MessageBox.alert({ title: '警告', content: '无法查看自己的直播间', }); return; } if (liveInfo?.liveId) { // 可以在此处添加业务处理，跳转到观看页面 // // 从【直播列表页面】跳转【观众观看页面】示例 // const newParams = new URLSearchParams(searchParams); // newParams.set('liveId', liveInfo.liveId); // // 直播间 ID 放入 URL 参数，观众观看页面可根据 URL 参数进入对应直播间 // navigate(`/live-player?${newParams.toString()}`); } }; const initLogin = useCallback(async () => { try { await login({ SDKAppID: 0, // 请替换为你的 SDKAppID（服务开通时获取） userID: '', // 请替换为你的用户 ID userSig: '', // 请替换为你的用户签名（详细获取方式请参阅【步骤1：环境配置及开通服务】文档） }); await setSelfInfo({ userName: '', // 用户昵称，会显示在成员列表、聊天消息中。不设置昵称时，将显示用户 ID avatarUrl: '', // 用户头像，必须为完整的 URL 图片地址，比如：https://your.domain.com/avatar-default.png }); } catch (error) { console.error('登录失败:', error); } }, [login, setSelfInfo]); useEffect(() => { async function init() { await initLogin(); } if (!loginUserInfo?.userId) { init(); } else { console.log('[LiveList]用户已登录:', loginUserInfo.userId); } }, [initLogin, loginUserInfo?.userId]); return ( <UIKitProvider theme="dark"> <div className={styles.liveList}> {/* 直播列表组件：设置为显示 5 列、注册直播间点击事件处理函数 */} <LiveList columnCount={5} onLiveRoomClick={handleLiveRoomClick} /> </div> </UIKitProvider> );};export default LiveListView;.liveList { display: flex; flex-direction: column; width: 100%; height: 100%; background-color: var(–uikit-bg-color-topbar); color: var(–uikit-text-color-primary); overflow: auto; box-sizing: border-box;}

四、步骤4: 页面路由配置

如果你是从直播列表页面跳转到直播观看页面，你需要配置 React Router 页面路由。在项目中新建或修改 src/router/index.tsx 文件。然后，在你的主文件（例如 main.tsx 或 App.tsx）中引入并使用路由。可参见 GitHub 代码示例。

1. 页面路由组件

在页面路由组件中，配置直播列表页面。

// src/router/index.tsximport { createHashRouter } from 'react-router-dom';import { LiveListView } from '../views/LiveList';import { LivePlayerView } from '../views/LivePlayer';// 路由保护组件const ProtectedRoute = ({ children }: { children: React.ReactNode; }) => { return ( <>{children}</> );};const routes = [ // 直播列表 { path: '/live-list', element: <LiveListView />, }, // // 若你需要实现点击直播列表直播间封面，跳转到直播观看页面功能，则需要配置观看页面路由 // // 观看页面详细接入，请参阅【观众观看 -> 观众观看（Web React）】 // { // path: '/live-player', // element: <LivePlayerView />, // }];export const router = createHashRouter( routes.map(route => ({ …route, element: <ProtectedRoute>{route.element}</ProtectedRoute>, })));

2. 配置 App.tsx 文件

在 App.tsx 文件中，使用上面的路由组件 src/router/index.tsx。

// src/App.tsximport { RouterProvider } from 'react-router-dom'import { router } from './router'import './App.css'function App() { return ( <RouterProvider router={router} /> )}export default App

五、步骤5：启动项目

进入项目根目录，执行以下命令启动项目，启动后即可访问直播列表页面。

npm run dev

首次启动，可能因没有直播间而显示空列表，可以访问我们提供的在线开播网站，使用你的 SDKAppID 和用户账号登录后，开启一场直播后，再来刷新一次直播列表页面，就能在直播列表页面看到直播间数据。

注意：为了正常体验直播功能，直播开播和直播观看，必须使用不同的用户 ID 登录，否则会出现登录账号互踢，无法体验。

六、颜色主题及语言

你可以使用 UIKitProvider 组件，修改默认的主题和语言。

1. 在 App.tsx 中全局设置

在 App.tsx 中，以 UIKitProvider 作为根元素。

import { RouterProvider } from 'react-router-dom'import { UIKitProvider } from '@tencentcloud/uikit-base-component-react'import { router } from './router'import './App.css'function App() { return ( <UIKitProvider theme="dark" language='zh-CN'> <RouterProvider router={router} /> </UIKitProvider> );}export default App

2. 在单个页面或组件中设置

在 React 组件中，以 UIKitProvider 作为根节点元素。以下示例代码截取自 “快速接入 步骤 3” 的代码片段。

// … 省略其它依赖引入import { UIKitProvider } from '@tencentcloud/uikit-base-component-react'const LiveListView: React.FC = () => { // … 省略其它代码 return ( <UIKitProvider theme="dark"> <div className={styles.liveList}> <LiveList columnCount={5} onLiveRoomClick={handleLiveRoomClick} /> </div> </UIKitProvider> );};export default LiveListView;

七、设置昵称和头像

上文中，“快速接入：步骤 3” 已包含昵称和头像设置代码，如下面代码所示，设置的头像和昵称，将显示在自己和其它直播间成员的成员列表、聊天消息中。如果不主动设置昵称和头像，昵称将显示为登录时的用户 ID、头像将显示为默认头像。

const initLogin = useCallback(async () => { try { await login({ SDKAppID: 0, // SDKAppID 服务开通时获取的 SDKAppID userID: '', // UserID 用户 ID userSig: '', // userSig 用户签名，详细获取方式请参阅【准备工作】文档 }); await setSelfInfo({ userName: '', // 用户昵称，会显示在成员列表、聊天消息中。不设置昵称时，将显示用户 ID avatarUrl: '', // 用户头像，必须为完整的 URL 图片地址，比如：https://your.domain.com/avatar-default.png }); } catch (error) { console.error('登录失败:', error); } }, [login, setSelfInfo]);

八、下一步

恭喜你，现在你已经成功集成了直播列表页面。接下来，你可以继续进一步接入 观众观看页、UI 自定义等内容：