文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>TRTC SDK>快速接入>React Native

React Native

最近更新时间：2026-01-26 11:12:25

我的收藏

本页目录：

准备环境

1. React Native 0.60+
2. Android 5.0+（真机调试）
3. iOS 12.0+（真机调试）
4. Node.js 14+
关于搭建开发环境的更多注意事项，详见 搭建开发环境。

步骤1. 导入SDK

通过 npm 或 yarn 安装 SDK： 
npm install trtc-react-native --save
# 或
yarn add trtc-react-native

步骤2. 配置项目

Android
iOS
1. 打开/android/app/src/main/AndroidManifest.xml文件，在其中添加如下权限：
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.autofocus" />
2. 在工程的 android/app 目录下创建 proguard-rules.pro 文件，并在 proguard-rules.pro 文件中添加如下代码：
-keep class com.tencent.** { *; }
1. iOS需要在 Info.plist 的第一级<dict>目录下加入对相机和麦克风的权限申请：
<key>NSCameraUsageDescription</key>
<string>授权摄像头权限才能正常视频通话</string>
<key>NSMicrophoneUsageDescription</key>
<string>授权麦克风权限才能正常语音通话</string>
2. 执行 pod install 安装原生依赖（需在 ios 目录下执行）。
说明：
如果您在接入过程中遇到问题，请参见 示例项目 。

步骤3. 创建 TRTC 实例

调用初始化接口创建 TRTC 实例。
import TRTCCloud from 'trtc-react-native';

// 创建 TRTC 单例实例
const trtcCloud = TRTCCloud.sharedInstance();

步骤4. 进入房间

在设置进房参数 TRTCParams 后，调用 enterRoom 接口函数即可进入房间。
参数
类型
描述
sdkAppId
number
您在 TRTC 控制台中创建的应用程序的 sdkAppId。
userId
string
您指定的用户 ID。
userSig
string
用户签名，请参见 UserSig 。
strRoomId
string
您指定的房间 ID，通常是唯一的房间 ID，限制长度为 64 字节。
import { TRTCParams, TRTCCloudDef } from 'trtc-react-native';

const params = new TRTCParams({
  sdkAppId: SDKAPPID,  // 腾讯云控制台申请的 SDKAppID
  userId: 'user123',   // 用户唯一标识
  userSig: 'xxxxxx',   // 用户签名（需通过服务端生成）
  strRoomId: '123abc', // 房间号
});

// 进入音视频通话场景的房间
trtcCloud.enterRoom(params, TRTCCloudDef.TRTC_APP_SCENE_VIDEOCALL);
说明：
您可以在 TRTC 控制台 中获取到您应用的 sdkAppId，并且参见 用户鉴权 获取 userSig。

步骤5. 打开摄像头

调用接口 setVideoEncoderParam 设置编码参数，调用接口 startLocalPreview 打开摄像头预览。
// 设置视频编码参数（可选）
const config = {
  videoResolution: TRTCCloudDef.TRTC_VIDEO_RESOLUTION_640_360,
  videoFps: 15,
  videoBitrate: 800,
};
trtcCloud.setVideoEncoderParam(config);


// 启动本地视频预览
trtcCloud.startLocalPreview(true); // `true` 表示开启前置摄像头

步骤6. 打开麦克风

您可以调用 startLocalAudio 来开启麦克风采集。
trtcCloud.startLocalAudio(); // 开启本地音频采集和上行

步骤7. 播放/停止视频流

播放本地视频： 
import { TXVideoView } from 'trtc-react-native';

// 在组件中渲染本地视频
<TXVideoView.LocalView style={{ width: 1080, height: 1080 }} />
播放远程视频： 
<TXVideoView.RemoteView 
  userId={remoteUserId} 
  streamType={TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG}
  style={{ width: 1080, height: 1080 }}
/>
停止播放： 
trtcCloud.stopRemoteView(userId, TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG);

步骤8. 播放/停止音频流

播放远程音频： 
trtcCloud.muteRemoteAudio(userId, false); // `false` 表示取消静音
停止播放： 
trtcCloud.muteRemoteAudio(userId, true);  // `true` 表示静音

步骤9. 退出房间

trtcCloud.exitRoom(); // 退出当前房间

常见问题

出现黑屏问题，如何处理？

检查摄像头权限是否已授权。
确保 TXVideoView 组件已正确渲染且尺寸不为零。

出现无法进入房间，如何处理？

检查 sdkAppId、userSig 和 strRoomId 是否有效。
确保网络连接正常。

出现音频异常，如何处理？

检查麦克风权限是否已授权。
调用 startLocalAudio() 后确认麦克风状态。
中国站
目录