一、前言

本文主要介绍如何用 React Native 框架基于腾讯云即时通信 Chat js SDK 快速搭建一款聊天App 。

UIKit Demo 源码可前往 github 下载

二、React Native UIKit 介绍

腾讯云即时通信团队推出了一款基于 React Native 框架的 UIKit，UIKit 主要提供了 ConversationList、Chat、ChatSetting、Contact 等组件，接下来用几组图片来介展示一下各个组件的功能。

ConversationList 主要负责会话列表的展示和会话操作，包括会话置顶、会话消息免打扰、会话删除等功能。

Chat 主要负责聊天窗口的搭建，支持文字、表情、图片、视频、文件、自定义等消息类型，同时您还可以长按消息对消息进行转发、撤回、引用以及查询消息已读回执详情等。

ChatSetting 主要负责群资料、群成员、群组权限的管理等能力。

Contact 主要负责好友列表、 添加好友、好友申请、黑名单等功能。

三、React Native UIKit 集成流程

创建项目

建议您用 react-native 0.75 创建一个 React Native 应用（推荐使用 typescript）。

npx @react-native-community/cli@latest init ChatApp --version 0.75.0

进入项目根目录

cd ChatApp

下载 chat-uikit-react-native

npm install @tencentcloud/chat-uikit-react-native

下载图片、视频、文件处理的依赖

npm install react-native-image-picker react-native-document-picker react-native-video

下载路由依赖

npm install @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

配置设备权限

Android

将以下内容添加到您项目 android/app/src/main/AndroidManifest.xml 文件中.

  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

iOS

将以下内容添加到您项目 ios 目录下的 info.plist 文件中.

  <key>NSCameraUsageDescription</key>
  <string> we would like to use your camera</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string> we would like to use your photo library</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>we would like to use your microphone</string>

集成 UIKit

在您项目的 App.tsx 同级目录下创建一个 Screens.tsx 文件，将以下内容复制到刚创建的文件中：

import React from 'react';
import { useNavigation } from '@react-navigation/native';
import { ConversationList, Chat, ChatSetting } from '@tencentcloud/chat-uikit-react-native';

export const ConversationListScreen = () => {
  const navigation = useNavigation<any>();
  const onPressConversation = () => {
    navigation.navigate('Chat');
  };
  return (
    <ConversationList onPressConversation={onPressConversation} />
  );
};

export const ChatScreen = () => {
  const navigation = useNavigation<any>();
  const navigateBack = () => {
    navigation.goBack();
  };
  const navigateToChatSetting = () => {
    navigation.navigate('ChatSetting');
  };
  return (
    <Chat
      navigateBack={navigateBack}
      navigateToChatSetting={navigateToChatSetting}
    />
  );
};

export const ChatSettingScreen = () => {
  const navigation = useNavigation<any>();
  // Navigate to Chat when you click header back button.
  const navigateBack = () => {
    navigation.goBack();
  };
  // Navigate to Chat when you click the send message button.
  const navigateToChat = () => {
    navigation.goBack();
  };
  // Navigate to ConversationList when you disband group or leave group.
  const navigateToConversationList = () => {
    navigation.navigate('ConversationList');
  };
  return (
    <ChatSetting
      navigateBack={navigateBack}
      navigateToChat={navigateToChat}
      navigateToConversationList={navigateToConversationList}
    />
  );
};

将一下内容全部复制到 App.tsx 文件中：

import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  Image,
  StyleSheet,
} from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { UIKitProvider } from '@tencentcloud/chat-uikit-react-native';
import resources from '@tencentcloud/chat-uikit-react-native/i18n';
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
import { TUILogin } from '@tencentcloud/tui-core';
import { ConversationListScreen, ChatScreen, ChatSettingScreen } from './Screens';

const LoginScreen = () => {
  const navigation = useNavigation<any>();
  // Init localization
  TUITranslateService.provideLanguages(resources);
  TUITranslateService.useI18n('en-US');
  // Login
  const Login = () => {
    TUILogin.login({
      SDKAppID: 0,
      userID: '',
      userSig: '',
      useUploadPlugin: true,
      framework: 'rn',
    }).then(() => {
      navigation.navigate('ConversationList');
    });
  }

  return (
    <View style={styles.container}>
      <Image
        style={styles.logo}
        source={{uri:'https://web.sdk.qcloud.com/im/assets/images/tencent_rtc_logo.png'}}
      />
      <TouchableOpacity style={styles.buttonContainer} onPress={Login}>
        <Text style={styles.buttonText}>Log in</Text>
      </TouchableOpacity>
    </View>
  );
};

const Navigation = () => {
  const Stack = createNativeStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{ headerShown: false }}
        initialRouteName="Login">
        <Stack.Screen
          name="Login"
          component={LoginScreen} />
        <Stack.Screen
          name="ConversationList"
          component={ConversationListScreen} />
        <Stack.Screen
          name="Chat"
          component={ChatScreen} />
        <Stack.Screen
          name="ChatSetting"
          component={ChatSettingScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const App = () => {
  return (
    <UIKitProvider>
      <Navigation />
    </UIKitProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  logo: {
    width: 232,
    height: 80,
  },
  buttonContainer: {
    width: '80%',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 11,
    borderRadius: 5,
    backgroundColor: '#2F80ED',
  },
  buttonText: {
    fontSize: 18,
    lineHeight: 24,
    color: '#FFFFFF',
  },
});

export default App;

四、编译运行 Chat App

编译运行项目您需要使用真机或模拟器，推荐使用真机运行。您可以参见 React Native 官网 running-on-device 连接真机进行 调试。
运行项目前您需要登录腾讯云 即时通信 IM 控制台 创建您的应用 ID 和登录的 userID 相关信息，并将 SDKAppID、userID、userSig 填写到 App.tsx 中的 SDKAppID、userID、userSig 的位置。

编译 Android

1. 手机开启开发者模式，打开 USB 调试 开关。
2. 用 USB 连接手机，推荐选择 传输文件 选项，不要选择 仅充电 选项。
3. 确认手机连接成功后，执行 npm run android编译运行项目。

npm run android  

编译 iOS

1. 用 USB 连接手机，用 Xcode 打开工程的 ios 目录。
2. 按照 React Native 官网 running-on-device 配置签名信息。
3. 进入 ios 目录下安装依赖。

cd ios
pod install

4. 回退到根目录，执行 npm run ios 编译运行项目。

cd ../
npm run