สร้างขึ้นเพื่อ REACT NATIVE

React Native
Chat UI Kit

เพิ่มการสนทนาบนอุปกรณ์เคลื่อนที่ด้วย React Native Chat UI Kit ของ Tencent RTC ผสานรวมรายการสนทนาที่เชื่อมต่อแล้ว ข้อความ และคอมโพเนนต์ป้อนข้อมูลเข้ากับแอป iOS และ Android

เริ่มสร้าง ลองใช้เดโม Chat

แหล่งข้อมูลสำหรับนักพัฒนา

เอกสารและตัวอย่าง Chat UI Kit สำหรับ React Native

ข้อมูลอ้างอิงคอมโพเนนต์

สำรวจคอมโพเนนต์ Chat UI Kit สำหรับ React Native

สำรวจคอมโพเนนต์การยืนยันตัวตนผู้ใช้

คู่มือการผสานรวม

ติดตั้ง Chat UI Kit สำหรับ React Native แล้วส่งข้อความทดสอบ

การผสานรวม React Native เริ่มต้นอย่างรวดเร็ว

ตัวอย่างและซอร์สโค้ด

สำรวจประสบการณ์รับส่งข้อความและแหล่งข้อมูลอย่างเป็นทางการสำหรับนักพัฒนา

ลองใช้เดโม Chat ดู React Native ซอร์สโค้ด

พื้นที่นัดพบในแอปของคุณ

เชื่อมโยงชุมชนของคุณด้วยบทสนทนาบนมือถือที่คุ้นเคย

สำรวจแชทชุมชน

แสดงในการสนทนา

จัดพื้นที่สำหรับรูปภาพและไฟล์แนบในขั้นตอนการแชทบนอุปกรณ์เคลื่อนที่

อ่านคู่มือการผสานรวม

ความสามารถด้านแชทของ REACT NATIVE

ฟีเจอร์สำคัญ พร้อมเชื่อมต่อ

รายการการสนทนา

การสนทนาล่าสุด
ตัวบ่งชี้ข้อความที่ยังไม่ได้อ่าน

UI การส่งข้อความ

มุมมองข้อความที่ผสานการทำงานแล้ว
เครื่องมือเขียนข้อความแบบผสานรวม

การแชร์สื่อ

รูปภาพและไฟล์แนบ
สิทธิ์เข้าถึงสื่อแบบเนทีฟ

ผู้คนและกลุ่ม

การสนทนาโดยตรง
การโต้ตอบในกลุ่ม

ทำให้เป็นของคุณเอง

ปรับซอร์สโค้ด UI
ปรับให้เข้ากับการนำทางของคุณ

คอมโพเนนต์ที่เชื่อมต่อกัน

Chat SDK ที่ทำงานอยู่เบื้องหลัง
ข้อมูลประจำตัวแอปพลิเคชันของคุณ

สำรวจ React Native Chat Components

ดูว่าคอมโพเนนต์ต่างๆ ทำงานร่วมกันอย่างไร

บทสนทนา

ทุกการสนทนาอยู่ใกล้แค่เอื้อม

เริ่มต้นด้วยรายการการสนทนาที่เชื่อมต่อแล้ว และปรับตัวอย่างให้เหมาะกับความต้องการ

อ่านเอกสาร

import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

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

ข้อความ

ปล่อยให้การสนทนาดำเนินไปอย่างเป็นธรรมชาติ

เพิ่มรายการข้อความสำหรับการสนทนาที่เลือก

อ่านเอกสาร

import { MessageList } from
  '@tencentcloud/chat-uikit-react-native';

<MessageList conversationID={conversationID} />

เครื่องมือเขียนข้อความ

ช่วยให้ตอบกลับได้ง่าย

เชื่อมต่อช่องป้อนข้อมูลกับบทสนทนาเดียวกับรายการข้อความ

อ่านเอกสาร

import { MessageInput } from
  '@tencentcloud/chat-uikit-react-native';

<MessageInput conversationID={conversationID} />

การปรับแต่ง

ปรับแต่ง UI แชท React Native ของคุณ

นำสไตล์ภาพและโฟลว์ของแอปพลิเคชันมาใช้ในแชต

ปรับหน้าจอให้เป็นแบบของคุณ

ปรับสไตล์คอมโพเนนต์และตัวเรนเดอร์ตัวอย่างให้เข้ากับแบรนด์บนมือถือของคุณ

อ่านเอกสาร

เริ่มต้นใช้งาน

การสนทนาครั้งแรกของคุณเริ่มต้นที่นี่

01
สร้างแอปของคุณ
ตั้งค่าแอปพลิเคชัน Chat และผู้ใช้ทดสอบ
เปิดคอนโซล Chat
02
เพิ่ม Chat UI Kit สำหรับ React Native
ทำตามคู่มือแพลตฟอร์มเพื่อเชื่อมต่อโปรเจกต์ของคุณ
ทำตามคู่มือการผสานรวม
03
เชื่อมต่อผู้ใช้ของคุณ
ลงชื่อเข้าใช้ด้วยผู้ใช้ทดสอบสองราย แล้วส่งข้อความแรกของคุณ
เชื่อมต่อผู้ใช้ของคุณ

Chat UI Kit สำหรับ React Native

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

import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

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

คำถามที่พบบ่อยเกี่ยวกับ React Native Chat UI Kit

ฉันสามารถใช้คอมโพเนนต์เหล่านี้ใน Expo Go ได้หรือไม่

การขึ้นต่อกันแบบเนทีฟต้องใช้บิลด์แบบเนทีฟ ปฏิบัติตามขั้นตอนบิลด์สำหรับการพัฒนา Expo หรือเวิร์กโฟลว์ React Native ในคู่มือปัจจุบัน ติดตั้ง peer dependencies และกำหนดค่าสิทธิ์สื่อ ตัวอย่างคอมโพเนนต์ถือว่าการเข้าสู่ระบบและการตั้งค่าแบบเนทีฟเสร็จสมบูรณ์แล้ว

อ่านคู่มือการผสาน

React Native UI Kit แตกต่างจาก SDK อย่างไร

UI Kit เพิ่มคอมโพเนนต์อินเทอร์เฟซที่ผสานการทำงานแล้วบน SDK การรับส่งข้อความ ใช้ Core SDK เมื่อต้องการสร้างอินเทอร์เฟซทั้งหมดด้วยตนเอง

สำรวจ Core SDK

ฉันจะยืนยันตัวตนผู้ใช้ของ React Native Chat UI Kit ได้อย่างไร

สร้าง UserSig สำหรับ production ที่ backend แล้วส่งให้ไคลเอนต์เพื่อยืนยันตัวตน โดยเก็บข้อมูลลับของแอปพลิเคชันไว้บนเซิร์ฟเวอร์

อ่านคู่มือการยืนยันตัวตน

ข้อมูลโค้ด React Native เหล่านี้ประกอบกันเป็นแอปพลิเคชันที่สมบูรณ์หรือไม่

เนื้อหาเหล่านี้แสดงขั้นตอนการผสานรวมแต่ละขั้น โปรดทำตามคู่มือฉบับเต็มสำหรับการนำเข้า การเริ่มต้นระบบ การเข้าสู่ระบบ การจัดการข้อผิดพลาด และการกำหนดค่าเฉพาะเป้าหมาย ทดสอบการรับส่งข้อความด้วยบัญชีแยกกันก่อนเผยแพร่

ดูบทแนะนำฉบับเต็ม

ค่าบริการตามการใช้งาน React Native Chat UI Kit คิดอย่างไร?

การใช้งานบริการ Chat แบบโฮสต์เป็นไปตามแพ็กเกจที่คุณเลือก ตรวจสอบฟีเจอร์และโควตาที่รวมอยู่สำหรับแอปพลิเคชันของคุณ โดยปลั๊กอินเสริมและบริการ Call อาจมีข้อกำหนดแยกต่างหาก

ดูราคา Chat

จะผสานรวม Chat UI Kit React Native กับ React Native ได้อย่างไร?

ติดตั้งแพ็กเกจและ dependency แบบเนทีฟตามเอกสาร แล้วบิลด์แอปเนทีฟใหม่ ตรวจสอบสิทธิ์ วงจรชีวิต และ callback แบบเนทีฟ โดยไม่ถือว่ารันไทม์มีเพียง JavaScript

อ่านคู่มือแพลตฟอร์ม

จะทดสอบ Chat UI Kit React Native ก่อนเผยแพร่แอปได้อย่างไร?

ตรวจสอบการเข้าสู่ระบบ ความพร้อม SDK เหตุการณ์ส่งรับ และสถานะข้อความหลังเชื่อมต่อใหม่

อ่านคู่มือแพลตฟอร์ม

จะปรับแต่งอินเทอร์เฟซของ Chat UI Kit React Native ได้อย่างไร?

คัดลอกหน้าจอของ UI Kit เข้าไปในแอปเมื่อต้องการปรับแต่งในระดับหน้าจอ เช่น ปรับ ChatScreen และเส้นทาง stack ภายในแอปเพื่อเปิดการสนทนาจากหน้าโปรไฟล์ลูกค้าที่มีอยู่ ตัวอย่างทางการใช้ @react-navigation/native หากเปลี่ยนไลบรารีนี้ ต้องอัปเดตคำสั่งนำทางภายในหน้าจอที่คัดลอกมาด้วย คง SafeAreaProvider และ ToastRoot ไว้ แล้วทดสอบขั้นตอนที่ปรับแต่งทั้งบน Android และ iOS

อ่านคู่มือการปรับแต่ง

ค้นหาความช่วยเหลือสำหรับขั้นตอนถัดไป

คำถามเกี่ยวกับการผสานรวม

รับความช่วยเหลือในการตั้งค่า Chat UI Kit สำหรับ React Native

ดูเอกสารสำหรับนักพัฒนา

พูดคุยเกี่ยวกับแอปพลิเคชันของคุณ

พูดคุยเกี่ยวกับผลิตภัณฑ์ ปริมาณการใช้งานที่คาดการณ์ และความต้องการด้านการผสานรวมของคุณ

ติดต่อฝ่ายขาย

สร้างประสบการณ์การสนทนาครั้งต่อไปของคุณ

สร้าง app ของคุณด้วย Chat UI Kit สำหรับ React Native

เริ่มต้นใช้งานฟรี ดูคู่มือ UI Kit

React Native Chat UI Kit

เอกสารและตัวอย่าง Chat UI Kit สำหรับ React Native

ข้อมูลอ้างอิงคอมโพเนนต์

คู่มือการผสานรวม

ตัวอย่างและซอร์สโค้ด

พื้นที่นัดพบในแอปของคุณ

แสดงในการสนทนา

ฟีเจอร์สำคัญ พร้อมเชื่อมต่อ

รายการการสนทนา

UI การส่งข้อความ

การแชร์สื่อ

ผู้คนและกลุ่ม

ทำให้เป็นของคุณเอง

คอมโพเนนต์ที่เชื่อมต่อกัน

สำรวจ React Native Chat Components

ทุกการสนทนาอยู่ใกล้แค่เอื้อม

ปล่อยให้การสนทนาดำเนินไปอย่างเป็นธรรมชาติ

ช่วยให้ตอบกลับได้ง่าย

ปรับแต่ง UI แชท React Native ของคุณ

ปรับหน้าจอให้เป็นแบบของคุณ

ตอบโจทย์วิธีที่ผู้คนเชื่อมต่อกัน

การสนทนาครั้งแรกของคุณเริ่มต้นที่นี่

สร้างแอปของคุณ

เพิ่ม Chat UI Kit สำหรับ React Native

เชื่อมต่อผู้ใช้ของคุณ

คำถามที่พบบ่อยเกี่ยวกับ React Native Chat UI Kit

ฉันสามารถใช้คอมโพเนนต์เหล่านี้ใน Expo Go ได้หรือไม่

React Native UI Kit แตกต่างจาก SDK อย่างไร

ฉันจะยืนยันตัวตนผู้ใช้ของ React Native Chat UI Kit ได้อย่างไร

ข้อมูลโค้ด React Native เหล่านี้ประกอบกันเป็นแอปพลิเคชันที่สมบูรณ์หรือไม่

ค่าบริการตามการใช้งาน React Native Chat UI Kit คิดอย่างไร?

จะผสานรวม Chat UI Kit React Native กับ React Native ได้อย่างไร?

จะทดสอบ Chat UI Kit React Native ก่อนเผยแพร่แอปได้อย่างไร?

จะปรับแต่งอินเทอร์เฟซของ Chat UI Kit React Native ได้อย่างไร?

ค้นหาความช่วยเหลือสำหรับขั้นตอนถัดไป

คำถามเกี่ยวกับการผสานรวม

พูดคุยเกี่ยวกับแอปพลิเคชันของคุณ

สร้างประสบการณ์การสนทนาครั้งต่อไปของคุณ

React Native
Chat UI Kit