实时音视频直播列表（Web React）

功能概览
本文将详细介绍 TUILiveKit React Demo 中的直播列表页面，引导您在自己的项目中集成 React 直播列表页面，并对页面的样式、功能进行定制。
﻿
快速接入
步骤1：环境配置及开通服务
在进行快速接入之前，请参考 准备工作 集成组件并实现登录。
步骤2：安装依赖
您可以选择以下任一方式安装依赖：
npm
pnpm
yarn
npm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react --save
npm install sass --save-dev
pnpm add tuikit-atomicx-react @tencentcloud/uikit-base-component-react
pnpm add sass --dev
yarn add tuikit-atomicx-react @tencentcloud/uikit-base-component-react
yarn add sass --dev
步骤3：接入直播列表页面
在您的项目下创建 LiveListView.tsx 和 LiveListView.module.scss 文件，可直接复制如下代码至您的项目中集成直播列表页面。
注意：
您可以直接复制如下代码至您的代码工程中集成，也可以访问 观众观看 开源代码，查看完整的源码内容。
LiveListView.tsx
LiveListView.module.scss
﻿
import 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(--bg-color-topbar);
  color: var(--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.tsx
import { 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.tsx
import { 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 组件，修改默认的主题和语言。
UIKitProvider 参数
可选值
默认值
theme
"light" | "dark"
"light"
language
"zh-CN" | "en-US"
- 
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 自定义等内容：
功能
描述
集成指引
观众观看
实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。
﻿观众观看（Web React）﻿
UI 自定义
更详细的 UI 组件自定义指引。
﻿UI 自定义﻿
Web 监播
运营平台，支持直播间管控。
﻿监播页面（Web React）﻿
UIKitProvider 参数	可选值	默认值
theme	"light" \| "dark"	"light"
language	"zh-CN" \| "en-US"	-
功能	描述	集成指引
观众观看	实现观众进入主播的直播间后观看直播，实现观众连麦、直播间信息、在线观众、弹幕显示等功能。	观众观看（Web React）
UI 自定义	更详细的 UI 组件自定义指引。	UI 自定义
Web 监播	运营平台，支持直播间管控。	监播页面（Web React）
直播列表（Web React）

本页目录：

功能概览

快速接入

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

步骤2：安装依赖

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

步骤4: 页面路由配置

步骤5：启动项目

自由定制

颜色主题及语言

设置昵称和头像

下一步
