React Native

环境准备
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 实例
import TRTCCloud from 'trtc-react-native';
﻿
// 创建 TRTC 单例实例
const trtcCloud = TRTCCloud.sharedInstance();
步骤4. 进入房间
import { TRTCParams, TRTCCloudDef } from 'trtc-react-native';
﻿
const params = new TRTCParams({
  sdkAppId: SDKAPPID, // 腾讯云控制台申请的 SDKAppID
  userId: 'user123',   // 用户唯一标识
  userSig: 'xxxxxx',   // 用户签名（需通过服务端生成）
  roomId: 2366,        // 房间号
});
﻿
// 进入音视频通话场景的房间
trtcCloud.enterRoom(params, TRTCCloudDef.TRTC_APP_SCENE_VIDEOCALL);
说明：
您可以在 TRTC 控制台 中获取到您应用的 sdkAppId，并且参见 用户鉴权 获取 userSig。
步骤5. 打开麦克风
trtcCloud.startLocalAudio(); // 开启本地音频采集和上行
步骤6. 播放/停止视频流
播放本地视频：  
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);
步骤7. 播放/停止音频流
播放远程音频：  
trtcCloud.muteRemoteAudio(userId, false); // `false` 表示取消静音
停止播放：  
trtcCloud.muteRemoteAudio(userId, true);  // `true` 表示静音
步骤8. 退出房间
trtcCloud.exitRoom(); // 退出当前房间
常见问题
出现黑屏问题，如何处理？  
• 检查摄像头权限是否已授权。  
• 确保 TXVideoView 组件已正确渲染且尺寸不为零。  
出现无法进入房间，如何处理？  
• 检查 sdkAppId、userSig 和 roomId 是否有效。  
• 确保网络连接正常。  
出现音频异常，如何处理？  
• 检查麦克风权限是否已授权。  
• 调用 startLocalAudio() 后确认麦克风状态。
联系我们
如果有任何需要或者反馈，您可以联系：info_rtc@tencent.com。