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
Panduan Integrasi
Instal Chat UI Kit untuk React Native dan kirim pesan uji.
Contoh & Source
Jelajahi pengalaman perpesanan dan sumber daya resmi untuk pengembang.
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.
Setiap percakapan dalam jangkauan
Mulai dengan daftar percakapan yang telah terhubung, lalu sesuaikan pratinjaunya sesuai kebutuhan.
Baca dokumentasiimport { ConversationList } from
'@tencentcloud/chat-uikit-react-native';
export function Conversations() {
return <ConversationList />;
}Biarkan percakapan mengalir
Tambahkan daftar pesan untuk percakapan yang dipilih.
Baca dokumentasiimport { MessageList } from
'@tencentcloud/chat-uikit-react-native';
<MessageList conversationID={conversationID} />Permudah pengguna untuk membalas
Hubungkan kolom input ke percakapan yang sama dengan daftar pesan.
Baca dokumentasiimport { MessageInput } from
'@tencentcloud/chat-uikit-react-native';
<MessageInput conversationID={conversationID} />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 dokumentasiSesuaikan dengan cara orang terhubung
Susun layar dan interaksi grup berdasarkan navigasi aplikasi Anda.
Baca dokumentasiMULAI
Percakapan pertama Anda dimulai di sini
- 01
- 02
Tambahkan Chat UI Kit untuk React Native
Ikuti panduan platform untuk menghubungkan proyek Anda.
Ikuti Panduan Integrasi - 03
Hubungkan pengguna Anda
Masuk sebagai dua pengguna uji coba dan kirim pesan pertama Anda.
Hubungkan Pengguna Anda
npm install @tencentcloud/chat-uikit-react-native tuikit-atomicx-react-nativeimport { 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
Pertanyaan integrasi
Dapatkan bantuan penyiapan untuk Chat UI Kit untuk React Native.
Lihat Dokumentasi PengembangDiskusikan aplikasi Anda
Diskusikan produk, perkiraan penggunaan, dan kebutuhan integrasi Anda.
Hubungi Tim PenjualanBangun pengalaman percakapan Anda berikutnya
Bangun app Anda dengan Chat UI Kit untuk React Native.

