文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊 SDK>含 UI 集成>视频直播>准备工作>准备工作（React Native）

准备工作（React Native）

最近更新时间：2026-01-16 11:03:32

我的收藏

本页目录：

功能预览

TUILiveKit 是一个功能全面的直播组件，集成后可快速实现以下功能模块
主播预览页
主播直播页
连麦管理页
观众观看页





准备工作

开通服务

在使用 TUILiveKit 前，您需要在 腾讯云控制台 开通相关服务，并领取体验版或者开通付费版。

环境要求

Node.js：>= 20.0.0 (推荐使用官方 LTS 版本)。
React Native：>= 0.82.1。
Yarn：>= 4.11.0。
Android Studio（Android 开发）。
Xcode 15+（iOS 开发，仅限 macOS）。
CocoaPods 环境：已安装 CocoaPods 环境。如果您尚未安装，请参见 CocoaPods 官网安装，或按以下步骤操作：
使用 gem 安装 CocoaPods：在终端中执行 sudo gem install cocoapods 命令进行安装。
提示：
sudo gem install cocoapods 安装过程中可能需要输入电脑密码，按提示输入管理员密码即可。
设备：两部摄像头、麦克风正常的手机。

代码集成

步骤1：下载源码

1. 克隆项目源码。
git clone https://github.com/Tencent-RTC/TUIKit_ReactNative.git
2. 导入源码至您的项目。
将源码中的 tuikit-atomic-x 文件夹，完整地拷贝至您的项目根目录下。
将源码中的 live 文件夹，完整地拷贝至您的项目根目录下。
3. 配置您项目的 package.json 文件。
{
 // 您项目的配置
  "workspaces": [
    "tuikit-atomic-x",
    "live",
  ],
}
4. 在您项目根目录下执行安装依赖操作。
  yarn install
5. 配置 App.tsx 文件。
TUILiveKit 国际化等相关逻辑需要依赖您项目的根节点才能生效，因此需要在您项目的 App.tsx 上进行挂载
注意：
以下示例代码均为在您项目已有代码上的增量更新。
import { CustomToastContainer, i18n, I18nextProvider } from 'react-native-tuikit-atomic-x';
  
function App() {
  
  const renderPage = () => {
    // 您的业务逻辑
  };

  return (
    <I18nextProvider i18n={i18n}>
      ...... 
      {renderPage()}
      <CustomToastContainer />
    </I18nextProvider>
  );
}

步骤2: 项目配置

iOS 平台配置
Android 平台配置
1. 在您项目的 Podfile 文件中添加 pod 'SVGAPlayer' 依赖。例如：
  target 'YourProjectTarget' do  
    # 其他已有的 Pod 依赖...  
    # 添加 pod 'SVGAPlayer' 依赖，礼物播放模块会使用到该能力
    pod 'SVGAPlayer', '~> 2.5.0'
    
  end
2. 安装组件：在终端中 cd 到 Podfile 文件所在的目录，然后执行以下命令安装组件。
pod install
3. 配置音视频权限 ios/YourApp/Info.plist。
<dict>
    <!-- 相机权限 -->
    <key>NSCameraUsageDescription</key>
    <string>需要使用相机进行视频通话</string>
    
    <!-- 麦克风权限 -->
    <key>NSMicrophoneUsageDescription</key>
    <string>需要使用麦克风进行音频通话</string>
    
    <!-- 网络权限 -->
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
</dict>
配置音视频权限 android/app/src/main/AndroidManifest.xml。
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 基础权限 -->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- 音视频权限 -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <application>
        <!-- 您的应用配置 -->
    </application>
</manifest>

步骤3：完成登录

import { useLoginState } from 'react-native-tuikit-atomic-x';

const { login } = useLoginState();

async function Login() {
  try {
    await login({
      sdkAppID: 0,        // SDKAppID, 可以参考步骤 1 获取
      userID: '',         // UserID, 可以参考步骤 1 获取
      userSig: '',        // userSig, 可以参考步骤 1 获取
    });
  } catch (error) {
    console.error('登录失败:', error);
  }
}

注意：
安全提醒: 出于安全考虑，强烈建议将 userSig 的计算逻辑放在您的服务端进行，避免将 SecretKey 暴露在前端代码中。您可以使用 控制台辅助工具 生成临时 userSig 进行调试。 更多信息参见 如何计算及使用 UserSig。GitHub 中的示例代码使用了 genTestUserSig 函数在本地计算 userSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SecretKey 暴露在代码当中，这并不利于您后续升级和保护您的 SecretKey。参数说明如下表所示：
参数
类型
说明
SDKAppID
int
从 控制台 获取，中国站通常是以 140 或 160 开头的 10 位整数。
UserID
String
当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突，请勿使用 1、123 等简单 ID。
userSig
String
用于腾讯云鉴权的票据。请注意：
开发环境：您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 userSig 或者 通过 UserSig 辅助工具 生成临时的 UserSig。
生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参考 服务端生成 UserSig。
更多信息请参见 如何计算及使用 UserSig。

步骤4：功能体验

恭喜您，现在您已经成功集成了视频直播组件并完成了登录。接下来，您可以开始主播开播、观众观看或实现其他直播功能，具体功能细节可参考下表。
功能
描述
体验链接
主播开播
主播开播全流程功能，包括开播前的准备和开播后的各种互动。
主播开播
观众观看
实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。
观众观看
直播列表
展示直播列表界面和功能，包含直播列表，房间信息展示功能。
直播列表

常见问题

iOS 项目编译失败怎么办？

React Native 0.60+ 支持自动链接，但如果遇到问题：
# 清理并重新构建
npx react-native clean

Android 项目编译失败怎么办？

检查 Gradle 配置：
// android/build.gradle
buildscript {
    ext {
        minSdkVersion = 24
        compileSdkVersion = 36
        targetSdkVersion = 36
        ndkVersion = "27.1.12297006"
        kotlinVersion = "2.1.20"
    }
}


中国站
目录