tencent cloud

React Native
下载PDF
最后更新时间：2025-12-02 10:36:47
React Native
最后更新时间： 2025-12-02 10:36:47
下载PDF
本文将介绍如何快速接入 TUICallKit 组件。您可以在 10 分钟内完成以下关键步骤，最终获得一个功能完备的音视频通话界面。


准备工作

环境要求

Node.js 16 及更高版本
设备需满足：Android 5.0 及以上的手机设备。

开通服务

请参见 开通服务，获取 SDKAppID、SecretKey，它们将在 步骤（登录）作为必填参数使用。

快速接入

步骤 1. 导入组件

1. 您可通过以下命令下载 @tencentcloud/call-uikit-react-native 组件.
yarn add @tencentcloud/call-uikit-react-native
2. 将 debug 目录复制到您的工程中，您可以通过 SDKAppID 、SecretKey本地生成 userSig 。
方式 1
方式 2
您可以在 GitHub 仓库目录的 TUICallKit/ReactNative/src/debug 获得。
MacOS
Windows
cp -r node_modules/@tencentcloud/call-uikit-react-native/src/debug ./src
xcopy node_modules\\@tencentcloud\\call-uikit-react\\src\\debug .\\src\\debug /i /e

步骤 2. 登录

您可以选择在 App.tsx 中引入 login 示例代码，它的作用是 TUI 组件的登录。这一步骤至关重要，只有在成功登录之后，您才能正常使用 TUICallKit 提供的各项功能。
login
import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';
import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";

const handleLogin = async () => {
  try {
    const sdkAppID = 0;   // 请替换为在控制台得到的 SDKAppID
    const secretKey = ''; // 请替换为在控制台得到的 SecretKey
    const userId = 'jack' // 请替换为您的 UserId
    const { userSig } = genTestUserSig({
      SDKAppID: sdkAppID,
      SecretKey: secretKey,
      userID: loginUserID,
    });

    await TUICallKit.login({
      sdkAppId: sdkAppID,
      userId: loginUserID,
      userSig,
    });
    console.log('login success');
  } catch (error) {
    console.error('login fail:', error);
  }
};
参数
类型
说明
userId
String
只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。
SDKAppId
int
在 Tencent RTC 控制台 创建的音视频应用的唯一标识 SDKAppID。
SecretKey
String
在 Tencent RTC 控制台 创建的音视频应用的 SDKSecretKey。
userSig
String
一种安全保护签名，用于对用户进行登录鉴权认证，确认用户是否真实，阻止恶意攻击者盗用您的云服务使用权。
说明：
开发环境：如果您在本地开发调试阶段，可以采用本地 GenerateTestUserSig.genTestSig函数生成 userSig。该方法中 secretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。
生产环境：如果您的项目要发布上线，请采用 服务端生成 UserSig 的方式。

步骤 3. 设置昵称和头像[可选]

首次登录的用户没有头像和昵称信息，您可以通过 setSelfInfo 接口设置头像和昵称。
setSelfInfo

import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';

const setSelfInfo = () => {
  const nickName = 'mick';                      // 需要设置的昵称
  const avatar = 'https:/****/user_avatar.png'; // 需要设置的头像 URL
  TUICallKit.setSelfInfo(
    nickName,
    avatar,
    () => {
      console.log('setSelfInfo success.');
    },
    (errCode, errMsg) => {
      console.error('setSelfInfo fail:', errCode, errMsg);
    }
  );
};
参数
类型
说明
nickName
String
需要设置的昵称。
avatar
String
需要设置的头像 url。

步骤 4. 拨打您的第一通电话

拨打方可以通过调用 calls 函数，并指定通话类型和被叫方的 userID，来发起语音或视频通话。calls 接口同时支持一对一通话和多人通话。当 userIDList 中包含一个 userID 时，为一对一通话；当 userIDList 包含多个 userID 时，则为多人通话。
calls
import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';

const calls = async () => {
  try {
    const userIdList: string[] = ['lee', 'jane']; // 被叫列表
    const mediaType = MediaType.Audio             // 通话类型
    await TUICallKit.calls({
      userIdList: userIdList,
      mediaType,
    });
    console.log('calls success');
  } catch (error) {
    console.error('calls fail:', error);
  }
};
参数
类型
含义
userIdList
Array<String>
目标用户的 userId 列表。
mediaType
MediaType
通话的媒体类型，例如视频通话、语音通话。
MediaType.Audio ：语音通话。
MediaType.Video ：视频通话。
callParams
通话扩展参数，例如：房间号、通话邀请超时时间，离线推送自定义内容等。

步骤5：接听通话

接听端完成登录后，拨打端发起通话，接收端就可以收到通话邀请，同时伴随铃声和振动。

更多功能

语言设置

支持的语言：目前支持简体中文、繁体中文、英文、日文和阿拉伯语。
切换语言：TUICallKit 默认语言与手机系统保持一致 。如果需要切换语言，可以使用 setLanguage 方法设置语言，以设置语言为英文示例代码如下。
setLanguage
import { Language } from '@tencentcloud/call-uikit-react-native';

TUICallKit.setLanguage(Language.EN);
参数
类型
含义
language
string
设置的语言：
Language.ZH_CN：简体中文。
Language.ZH_TW：繁体中文。
Language.EN：英文。
Language.AR：阿拉伯语。
说明：
如需设置其他语言，请联系我们（info_rtc@tencent.com）获取协助。

铃声设置

您可通过以下方式设置默认铃声、来电静音模式、离线推送铃声：
设置默认铃声：通过 setCallingBell 接口设置被叫端收到的来电铃声。
setCallingBell
import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';

const setCallingBell = () => {
  const filePath = 'path/to/your/bell.mp3'; // 铃声文件的路径
  TUICallKit.setCallingBell(filePath);
};
详情：这里仅限传入本地文件地址，需要确保该文件目录是应用可以访问的。铃声设置后与设备绑定，更换用户，铃声依旧会保留原设置。如需恢复默认铃声，filePath 传空即可。
参数
类型
说明
filePath
String
铃声文件的路径。
来电静音模式：您可以通过 enableMuteMode 设置静音模式。
enableMuteMode
import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';

TUICallKit.enableMuteMode(true);
详情：开启后，收到通话请求，不会播放来电铃声。

常见问题

如果您的接入和使用中遇到问题，请参见 常见问题。

交流与反馈

如果有任何需要或者反馈，您可以联系：info_rtc@tencent.com 。
本页内容是否解决了您的问题？
您也可以 联系销售 或 提交工单 以寻求帮助。
是
否

文档反馈