DIBUAT UNTUK REACT NATIVE

React Native
Chat UI Kit

Tambahkan percakapan seluler dengan React Native Chat UI Kit dari Tencent RTC. Integrasikan daftar percakapan yang terhubung, pesan, dan komponen input ke aplikasi iOS dan Android Anda.

SUMBER DAYA DEVELOPER

Dokumentasi & Contoh Chat UI Kit untuk React Native

Tempat bertemu di aplikasi Anda

Satukan komunitas Anda melalui percakapan seluler yang familier.

Tampilkan dalam percakapan

Sediakan ruang untuk foto dan lampiran dalam alur chat seluler.

KEMAMPUAN CHAT REACT NATIVE

Fitur esensial, siap dihubungkan

Daftar percakapan

  • Percakapan terbaru
  • Indikator pesan belum dibaca

UI Pesan

  • Tampilan pesan terintegrasi
  • Penyusun pesan terintegrasi

Berbagi media

  • Foto dan lampiran
  • Izin media native

Orang dan grup

  • Percakapan langsung
  • Interaksi grup

Jadikan milik Anda

  • Sesuaikan kode sumber UI
  • Sesuaikan dengan navigasi Anda

Komponen yang terhubung

  • Chat SDK sebagai fondasi
  • Identitas aplikasi Anda

Jelajahi React Native Chat Components

Lihat bagaimana komponen bekerja sama.

Percakapan

Setiap percakapan dalam jangkauan

Mulai dengan daftar percakapan yang telah terhubung, lalu sesuaikan pratinjaunya sesuai kebutuhan.

Baca dokumentasi
Conversations.tsx
import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

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

PENYESUAIAN

Sesuaikan UI chat React Native Anda

Terapkan gaya visual dan alur aplikasi Anda ke dalam chat.

Sesuaikan layar Anda

Sesuaikan gaya komponen dan perender pratinjau dengan merek seluler Anda.

Baca dokumentasi

MULAI

Percakapan pertama Anda dimulai di sini

  1. 01

    Buat aplikasi Anda

    Siapkan aplikasi Chat dan pengguna uji Anda.

    Buka Konsol Chat
  2. 02

    Tambahkan Chat UI Kit untuk React Native

    Ikuti panduan platform untuk menghubungkan proyek Anda.

    Ikuti Panduan Integrasi
  3. 03

    Hubungkan pengguna Anda

    Masuk sebagai dua pengguna uji coba dan kirim pesan pertama Anda.

    Hubungkan Pengguna Anda
Chat UI Kit untuk 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 />;
}

Pertanyaan umum tentang React Native Chat UI Kit

Bisakah saya menggunakan komponen ini di Expo Go?

Dependensi native memerlukan build native. Ikuti build pengembangan Expo atau alur kerja React Native dalam panduan saat ini, instal dependensi peer, dan konfigurasikan izin media. Cuplikan komponen mengasumsikan bahwa login dan penyiapan native telah selesai.

Apa perbedaan React Native UI Kit dengan SDK?

UI Kit menambahkan komponen antarmuka yang terintegrasi di atas SDK perpesanan. Gunakan Core SDK jika Anda ingin membangun seluruh antarmuka sendiri.

Bagaimana cara mengautentikasi pengguna React Native Chat UI Kit?

Buat UserSig produksi di backend Anda. Teruskan ke klien untuk autentikasi dan simpan rahasia aplikasi Anda di server.

Apakah cuplikan React Native ini membentuk aplikasi yang lengkap?

Bagian ini menunjukkan setiap langkah integrasi secara terpisah. Ikuti panduan lengkap untuk impor, inisialisasi, login, penanganan kesalahan, dan konfigurasi khusus target. Uji perpesanan dengan akun terpisah sebelum dirilis.

Bagaimana harga penggunaan React Native Chat UI Kit ditentukan?

Penggunaan layanan Chat terkelola mengikuti paket yang Anda pilih. Periksa fitur dan kuota yang disertakan untuk aplikasi Anda; plugin opsional dan layanan Call dapat memiliki persyaratan terpisah.

Bagaimana cara mengintegrasikan Chat UI Kit React Native dengan React Native?

Instal paket dan dependensi native sesuai dokumentasi, lalu bangun ulang aplikasi native. Verifikasi izin, siklus hidup, dan callback native tanpa menganggap runtime hanya menggunakan JavaScript.

Bagaimana cara menguji Chat UI Kit React Native sebelum merilis aplikasi?

Periksa login, kesiapan SDK, peristiwa kirim dan terima, serta status pesan setelah tersambung kembali.

Bagaimana cara menyesuaikan antarmuka Chat UI Kit React Native?

Salin layar UI Kit ke aplikasi Anda saat memerlukan perubahan pada tingkat layar. Misalnya, sesuaikan ChatScreen dan rute stack lokal untuk membuka percakapan dari profil pelanggan yang sudah ada. Contoh resmi menggunakan @react-navigation/native; menggantinya juga mengharuskan Anda memperbarui pemanggilan navigasi di dalam layar yang disalin. Pertahankan SafeAreaProvider dan ToastRoot, lalu uji alur kustom Anda di Android dan iOS.

Temukan dukungan untuk langkah berikutnya

Diskusikan aplikasi Anda

Diskusikan produk, perkiraan penggunaan, dan kebutuhan integrasi Anda.

Hubungi Tim Penjualan

Bangun pengalaman percakapan Anda berikutnya

Bangun app Anda dengan Chat UI Kit untuk React Native.