一、功能预览
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' end2. 安装组件：在终端中 cd 到 Podfile 文件所在的目录，然后执行以下命令安装组件。pod install3. 配置音视频权限 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。参数说明如下表所示：
七、步骤4：功能体验
恭喜你，现在你已经成功集成了视频直播组件并完成了登录。接下来，你可以开始主播开播、观众观看或实现其他直播功能，具体功能细节可参考下表。
| 功能 | 描述 | 体验链接 |
| 主播开播 | 主播开播全流程功能，包括开播前的准备和开播后的各种互动。 | 主播开播 |
| 观众观看 | 实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。 | 观众观看 |
| 直播列表 | 展示直播列表界面和功能，包含直播列表，房间信息展示功能。 | 直播列表 |
八、iOS 项目编译失败怎么办？
React Native 0.60+ 支持自动链接，但如果遇到问题：
# 清理并重新构建npx react-native clean
九、Android 项目编译失败怎么办？
检查 Gradle 配置：
// android/build.gradlebuildscript { ext { minSdkVersion = 24 compileSdkVersion = 36 targetSdkVersion = 36 ndkVersion = "27.1.12297006" kotlinVersion = "2.1.20" }}