ĐƯỢ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
Hướng dẫn tích hợp
Cài đặt Chat UI Kit cho React Native và gửi một tin nhắn thử nghiệm.
Ví dụ & mã nguồn
Khám phá trải nghiệm nhắn tin và các tài nguyên chính thức dành cho nhà phát triển.
Nơi gặp gỡ ngay trong ứng dụng
Gắn kết cộng đồng bằng trải nghiệm trò chuyện quen thuộc trên thiết bị di động.
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.
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ệuimport { ConversationList } from
'@tencentcloud/chat-uikit-react-native';
export function Conversations() {
return <ConversationList />;
}Để cuộc trò chuyện diễn ra tự nhiên
Thêm danh sách tin nhắn cho cuộc trò chuyện đã chọn.
Đọc tài liệuimport { MessageList } from
'@tencentcloud/chat-uikit-react-native';
<MessageList conversationID={conversationID} />Giúp việc trả lời trở nên dễ dàng
Kết nối ô nhập liệu với cùng cuộc trò chuyện mà danh sách tin nhắn đang sử dụng.
Đọc tài liệuimport { MessageInput } from
'@tencentcloud/chat-uikit-react-native';
<MessageInput conversationID={conversationID} />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ệuPhù hợp với cách mọi người kết nối
Xây dựng các màn hình và tương tác nhóm xoay quanh luồng điều hướng của ứng dụng.
Đọc tài liệuBẮT ĐẦU
Cuộc trò chuyện đầu tiên của bạn bắt đầu tại đây
- 01
- 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 - 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
npm install @tencentcloud/chat-uikit-react-native tuikit-atomicx-react-nativeimport { 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
Câu hỏi về tích hợp
Nhận hỗ trợ thiết lập Chat UI Kit cho React Native.
Xem tài liệu dành cho nhà phát triểnTrao đổ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 doanhXâ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.

