ĐƯỢC XÂY DỰNG CHO REACT NATIVE

React Native
Chat UI Kit

Thêm cuộc trò chuyện trên thiết bị di động với React Native Chat UI Kit của Tencent RTC. Tích hợp danh sách cuộc trò chuyện đã kết nối, tin nhắn và các thành phần nhập liệu vào ứng dụng iOS và Android.

TÀI NGUYÊN DÀNH CHO NHÀ PHÁT TRIỂN

Tài liệu & Ví dụ về Chat UI Kit cho React Native

Hiển thị trong cuộc trò chuyện

Dành không gian cho ảnh và tệp đính kèm trong luồng trò chuyện trên thiết bị di động.

KHẢ NĂNG TRÒ CHUYỆN REACT NATIVE

Các tính năng thiết yếu, sẵn sàng kết nối

Danh sách cuộc trò chuyện

  • Cuộc trò chuyện gần đây
  • Chỉ báo tin nhắn chưa đọc

Giao diện nhắn tin

  • Chế độ xem tin nhắn được tích hợp
  • Trình soạn thảo tích hợp

Chia sẻ nội dung đa phương tiện

  • Ảnh và tệp đính kèm
  • Quyền truy cập nội dung đa phương tiện native

Mọi người và nhóm

  • Cuộc trò chuyện trực tiếp
  • Tương tác nhóm

Biến nó thành của bạn

  • Điều chỉnh mã nguồn UI
  • Điều chỉnh cho phù hợp với hệ thống điều hướng

Các thành phần được kết nối

  • Chat SDK nền tảng
  • Danh tính ứng dụng của bạn

Khám phá React Native Chat Components

Xem cách các thành phần phối hợp với nhau.

Cuộc trò chuyện

Mọi cuộc trò chuyện trong tầm tay

Bắt đầu với danh sách cuộc trò chuyện đã kết nối và điều chỉnh phần xem trước theo nhu cầu.

Đọc tài liệu
Conversations.tsx
import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

export function Conversations() {
  return <ConversationList />;
}

TÙY CHỈNH

Tùy chỉnh UI chat React Native

Đưa phong cách hình ảnh và luồng ứng dụng của bạn vào chat.

Tùy biến màn hình theo cách của bạn

Điều chỉnh kiểu thành phần và trình kết xuất bản xem trước cho phù hợp với thương hiệu di động của bạn.

Đọc tài liệu

BẮT ĐẦU

Cuộc trò chuyện đầu tiên của bạn bắt đầu tại đây

  1. 01

    Tạo ứng dụng của bạn

    Thiết lập ứng dụng Chat và người dùng thử nghiệm.

    Mở bảng điều khiển Chat
  2. 02

    Thêm Chat UI Kit cho React Native

    Làm theo hướng dẫn nền tảng để kết nối dự án của bạn.

    Làm theo Hướng dẫn tích hợp
  3. 03

    Kết nối người dùng của bạn

    Đăng nhập bằng hai người dùng thử nghiệm và gửi tin nhắn đầu tiên.

    Kết nối người dùng của bạn
Chat UI Kit cho React Native
Terminal
npm install @tencentcloud/chat-uikit-react-native tuikit-atomicx-react-native
Conversations.tsx
import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

export function Conversations() {
  return <ConversationList />;
}

Câu hỏi thường gặp về React Native Chat UI Kit

Tôi có thể sử dụng các thành phần này trong Expo Go không?

Các phần phụ thuộc native yêu cầu bản dựng native. Làm theo quy trình bản dựng phát triển Expo hoặc React Native trong hướng dẫn hiện tại, cài đặt các peer dependency và cấu hình quyền truy cập phương tiện. Các đoạn mã thành phần giả định rằng quá trình đăng nhập và thiết lập native đã hoàn tất.

React Native UI Kit khác SDK như thế nào?

UI Kit bổ sung các thành phần giao diện được tích hợp trên SDK nhắn tin. Hãy sử dụng Core SDK nếu bạn muốn tự xây dựng toàn bộ giao diện.

Làm cách nào để xác thực người dùng của React Native Chat UI Kit?

Tạo UserSig cho môi trường production ở backend. Chuyển mã này cho máy khách để xác thực và giữ khóa bí mật của ứng dụng trên máy chủ.

Các đoạn mã React Native này có tạo thành một ứng dụng hoàn chỉnh không?

Nội dung này trình bày từng bước tích hợp riêng lẻ. Hãy làm theo hướng dẫn đầy đủ về nhập thư viện, khởi tạo, đăng nhập, xử lý lỗi và cấu hình dành riêng cho nền tảng đích. Kiểm thử nhắn tin bằng các tài khoản riêng trước khi phát hành.

Mức phí sử dụng React Native Chat UI Kit được tính như thế nào?

Mức sử dụng dịch vụ Chat được lưu trữ phụ thuộc vào gói bạn chọn. Hãy kiểm tra các tính năng và hạn mức đi kèm cho ứng dụng; plugin tùy chọn và dịch vụ Call có thể có yêu cầu riêng.

Làm thế nào để tích hợp Chat UI Kit React Native với React Native?

Cài gói và các phụ thuộc native theo tài liệu, rồi dựng lại ứng dụng native. Xác minh quyền, vòng đời và callback native thay vì giả định môi trường chỉ chạy JavaScript.

Làm thế nào để kiểm thử Chat UI Kit React Native trước khi phát hành ứng dụng?

Kiểm tra đăng nhập, SDK sẵn sàng, sự kiện gửi nhận và trạng thái tin nhắn sau kết nối lại.

Làm thế nào để tùy chỉnh giao diện Chat UI Kit React Native?

Sao chép các màn hình UI Kit vào ứng dụng khi cần thay đổi ở cấp màn hình. Ví dụ, điều chỉnh ChatScreen và các tuyến stack cục bộ để mở cuộc hội thoại từ hồ sơ khách hàng hiện có. Ví dụ chính thức dùng @react-navigation/native; nếu thay thư viện này, bạn cũng phải cập nhật các lệnh điều hướng trong những màn hình đã sao chép. Giữ SafeAreaProvider và ToastRoot, đồng thời kiểm tra luồng tùy chỉnh trên cả Android lẫn iOS.

Tìm hỗ trợ cho bước tiếp theo

Trao đổi về ứng dụng của bạn

Trao đổi về sản phẩm, mức sử dụng dự kiến và nhu cầu tích hợp của bạn.

Liên hệ bộ phận kinh doanh

Xây dựng trải nghiệm trò chuyện tiếp theo

Xây dựng app bằng Chat UI Kit cho React Native.