快速开始

大约 3 分钟

快速开始

利用环信单群聊 UIKit,你可以轻松实现单群和群聊。本文介绍如何快速实现在单聊会话中发送消息。

前提条件

开始前,确保你的开发环境满足如下条件:

  • MacOS 12 或以上版本;
  • React Native 0.71 或以上版本;
  • NodeJs 16.18 或以上版本;
  • 对于 iOS 平台,需要 Xcode 工具,版本建议 14 或以上;
  • 对于 Android 平台,需要 Android studio 工具,版本建议 2022 或以上。

实现发送单聊消息

第一步 创建项目

运行以下命令,创建项目。

npx react-native@latest init ProjectName

可能提示安装 react-native 最新版本。

创建完成,默认会初始化项目,安装依赖到 node_modules,以及生成 package-lock.json文件。如果使用 yarn 初始化,将生成 yarn.lock 文件。

第二步 添加依赖项

Chat UIKit SDK 需要额外的依赖。在 package.json 文件中添加依赖。

{
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-native-camera-roll/camera-roll": "^5.6.0",
    "@react-native-clipboard/clipboard": "^1.11.2",
    "@react-native-firebase/app": "^18.0.0",
    "@react-native-firebase/messaging": "^18.0.0",
    "date-fns": "^2.30.0",
    "pinyin-pro": "^3.18.3",
    "pure-uuid": "^1.6.3",
    "react": "18.2.0",
    "react-native": "0.73.2",
    "react-native-agora": "~4.2.6",
    "react-native-chat-uikit": "~2.0.0",
    "react-native-chat-sdk": "~1.3.1",
    "react-native-audio-recorder-player": "^3.5.3",
    "@easemob/react-native-create-thumbnail": "^1.6.6",
    "react-native-device-info": "^10.6.0",
    "react-native-document-picker": "^9.0.1",
    "react-native-fast-image": "^8.6.3",
    "react-native-file-access": "^3.0.4",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-get-random-values": "~1.8.0",
    "react-native-image-picker": "^7.0.3",
    "react-native-permissions": "^3.8.0",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "^3.20.0",
    "react-native-video": "^5.2.1",
    "react-native-web": "~0.19.6",
    "react-native-webview": "13.2.2",
    "twemoji": "~14.0.2"
  }
}

iOS 平台

  1. 更新 Podfile 文件:
# ...
target 'ProjectName' do
  # ...

  pod 'GoogleUtilities', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true

  permissions_path = File.join(File.dirname(`node --print "require.resolve('react-native-permissions/package.json')"`), "ios")
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  pod 'Permission-MediaLibrary', :path => "#{permissions_path}/MediaLibrary"
  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone"
  pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"

  # ...
end
  1. 更新 Info.plist 文件:
<dict>
	<key>NSCameraUsageDescription</key>
	<string></string>
	<key>NSMicrophoneUsageDescription</key>
	<string></string>
	<key>NSPhotoLibraryUsageDescription</key>
	<string></string>
</dict>

Android 平台

更新 AndroidManifest.xml 文件:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
</manifest>

第三步 添加代码

添加的主要代码包括登录、登出、发送消息。

import * as React from "react";
import { Pressable, SafeAreaView, Text, View } from "react-native";
import {
  Container,
  ConversationDetail,
  TextInput,
  useChatContext,
} from "react-native-chat-uikit";

// 修改默认值
const appKey = "<your app key>";
const userId = "<current user ID>";
const userPs = "<current user password>";
const peerId = "<conversation ID>";

function SendMessage() {
  const [page, setPage] = React.useState(0);
  const [id, setId] = React.useState(userId);
  const [ps, setPs] = React.useState(userPs);
  const [peer, setPeer] = React.useState(peerId);
  const im = useChatContext();

  if (page === 0) {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <TextInput
          placeholder="Please Login ID."
          value={id}
          onChangeText={setId}
        />
        <TextInput
          placeholder="Please Login token or password."
          value={ps}
          onChangeText={setPs}
        />
        <TextInput
          placeholder="Please peer ID."
          value={peer}
          onChangeText={setPeer}
        />
        <Pressable
          onPress={() => {
            im.login({
              userId: id,
              userToken: ps,
              usePassword: true,
              result: (res) => {
                console.log("login result", res);
                if (res.isOk === true) {
                  setPage(1);
                }
              },
            });
          }}
        >
          <Text>{"Login"}</Text>
        </Pressable>
        <Pressable
          onPress={() => {
            im.logout({
              result: () => {},
            });
          }}
        >
          <Text>{"Logout"}</Text>
        </Pressable>
      </SafeAreaView>
    );
  } else if (page === 1) {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <ConversationDetail
          convId={peer}
          convType={0}
          onBack={() => {
            setPage(0);
          }}
        />
      </SafeAreaView>
    );
  } else {
    return <View />;
  }
}

function App(): React.JSX.Element {
  return (
    <Container options={{ appKey: appKey }}>
      <SendMessage />
    </Container>
  );
}

export default App;

第四步 编译和运行

  • 对于 iOS 平台,运行 yarn run ios
  • 对于 Android 平台,运行 yarn run android

第五步 发送第一条消息

点击登录按钮,进入聊天页面,输入文本内容,点击发送。

img

示例项目地址

仓库地址open in new window