即时通信 IM React Native（快速接入）

一、环境要求

·Node.js 16 及更高版本。

二、开通服务

请参见开通服务，获取 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 获得。你可以在 @tencentcloud/call-uikit-react-native 中获取MacOSWindowscp -r node_modules/@tencentcloud/call-uikit-react-native/src/debug ./srcxcopy node_modules\\@tencentcloud\\call-uikit-react\\src\\debug .\\src\\debug /i /e

四、步骤2：登录

你可以选择在 App.tsx 中引入 login 示例代码，它的作用是 TUI 组件的登录。这一步骤至关重要，只有在成功登录之后，你才能正常使用 TUICallKit 提供的各项功能。

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	在实时音视频 TRTC 控制台创建的音视频应用的唯一标识 SDKAppID。
SecretKey	String	在实时音视频 TRTC 控制台创建的音视频应用的 SDKSecretKey。
userSig	String	一种安全保护签名，用于对用户进行登录鉴权认证，确认用户是否真实，阻止恶意攻击者盗用你的云服务使用权。

注意：说明：

五、步骤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	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：阿拉伯语。

注意：说明：

注意：如需设置其他语言，请联系我们获取协助。

九、铃声设置

你可通过以下方式设置默认铃声、来电静音模式、离线推送铃声：

·设置默认铃声：通过 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 设置静音模式。

enableMuteModeimport { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';TUICallKit.enableMuteMode(true);详情：开启后，收到通话请求，不会播放来电铃声。

·自定义离线推送铃声：离线推送默认铃声是由系统决定的，可以在手机设置中，进入应用详情，查看或更改应用的通知铃声。

离线通知铃声仅支持以下厂商自定义：华为、小米、FCM 和 APNs，其他厂商暂不支持。离线推送铃声设置详见：自定义铃音。

十、常见问题

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

十一、交流与反馈

如果你在使用过程中，有什么建议或者意见，可以联系我们，感谢你的反馈。