UI obrolan terlengkap untuk React Native & Web
Web Demo?
Taman bermain Snack GiftedChat
Coding Bootcamp di Paris didirikan bersama oleh Farid Safi
Klik untuk mempelajari lebih lanjut
API/Server obrolan skalabel yang ditulis dalam Go
Tur API | Tutorial Bereaksi Asli Berbakat
Mesin aplikasi lengkap yang menampilkan GiftedChat
Lihat GitHub kami
react-native-web
(sejak 0.10.0).Benang:
yarn add react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values
Npm:
npm install --save react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values
Pameran
npx expo install react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values
npx pod-install
Ikuti panduan: konteks area aman-asli-asli
Ikuti panduan: reaksi-asli-dihidupkan kembali
0.11.0
.video
tetapi Anda perlu menyediakan prop renderMessageVideo
. TEST_ID
diekspor sebagai konstanta yang dapat digunakan di perpustakaan pengujian pilihan Anda
Obrolan Berhadiah menggunakan onLayout
untuk menentukan ketinggian wadah obrolan. Untuk memicu onLayout
selama pengujian, Anda dapat menjalankan bit kode berikut.
const WIDTH = 200 ; // or any number
const HEIGHT = 2000 ; // or any number
const loadingWrapper = getByTestId ( TEST_ID . LOADING_WRAPPER )
fireEvent ( loadingWrapper , 'layout' , {
nativeEvent : {
layout : {
width : WIDTH ,
height : HEIGHT ,
} ,
} ,
} )
import React , { useState , useCallback , useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'
export function Example ( ) {
const [ messages , setMessages ] = useState ( [ ] )
useEffect ( ( ) => {
setMessages ( [
{
_id : 1 ,
text : 'Hello developer' ,
createdAt : new Date ( ) ,
user : {
_id : 2 ,
name : 'React Native' ,
avatar : 'https://placeimg.com/140/140/any' ,
} ,
} ,
] )
} , [ ] )
const onSend = useCallback ( ( messages = [ ] ) => {
setMessages ( previousMessages =>
GiftedChat . append ( previousMessages , messages ) ,
)
} , [ ] )
return (
< GiftedChat
messages = { messages }
onSend = { messages => onSend ( messages ) }
user = { {
_id : 1 ,
} }
/>
)
}
Lihat App.tsx
untuk demo yang berfungsi!
Lihat file di example/example-slack-message
untuk contoh cara mengganti UI default untuk membuat sesuatu yang lebih mirip Slack -- dengan nama pengguna ditampilkan dan semua pesan di sebelah kiri.
misalnya Pesan Obrolan
export interface IMessage {
_id : string | number
text : string
createdAt : Date | number
user : User
image ?: string
video ?: string
audio ?: string
system ?: boolean
sent ?: boolean
received ?: boolean
pending ?: boolean
quickReplies ?: QuickReplies
}
{
_id : 1 ,
text : 'My message' ,
createdAt : new Date ( Date . UTC ( 2016 , 5 , 11 , 17 , 20 , 0 ) ) ,
user : {
_id : 2 ,
name : 'React Native' ,
avatar : 'https://facebook.github.io/react/img/logo_og.png' ,
} ,
image : 'https://facebook.github.io/react/img/logo_og.png' ,
// You can also add a video prop:
video : 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' ,
// Mark the message as sent, using one tick
sent : true ,
// Mark the message as received, using two tick
received : true ,
// Mark the message as pending with a clock loader
pending : true ,
// Any additional custom parameters are passed through
}
misalnya Pesan Sistem
{
_id : 1 ,
text : 'This is a system message' ,
createdAt : new Date ( Date . UTC ( 2016 , 5 , 11 , 17 , 20 , 0 ) ) ,
system : true ,
// Any additional custom parameters are passed through
}
misalnya Pesan Obrolan dengan opsi Balasan Cepat
Lihat PR #1211
interface Reply {
title : string
value : string
messageId ?: number | string
}
interface QuickReplies {
type : 'radio' | 'checkbox'
values : Reply [ ]
keepIt ?: boolean
}
{
_id : 1 ,
text : 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT' ,
createdAt : new Date ( ) ,
quickReplies : {
type : 'radio' , // or 'checkbox',
keepIt : true ,
values : [
{
title : '? Yes' ,
value : 'yes' ,
} ,
{
title : '? Yes, let me show you with a picture!' ,
value : 'yes_picture' ,
} ,
{
title : '? Nope. What?' ,
value : 'no' ,
} ,
] ,
} ,
user : {
_id : 2 ,
name : 'React Native' ,
} ,
} ,
{
_id : 2 ,
text : 'This is a quick reply. Do you love Gifted Chat? (checkbox)' ,
createdAt : new Date ( ) ,
quickReplies : {
type : 'checkbox' , // or 'radio',
values : [
{
title : 'Yes' ,
value : 'yes' ,
} ,
{
title : 'Yes, let me show you with a picture!' ,
value : 'yes_picture' ,
} ,
{
title : 'Nope. What?' ,
value : 'no' ,
} ,
] ,
} ,
user : {
_id : 2 ,
name : 'React Native' ,
} ,
}
messageContainerRef
(FlatList ref) - Merujuk ke daftar datartextInputRef
(TextInput ref) - Merujuk ke input teksmessages
(Array) - Pesan untuk ditampilkanisTyping
(Bool) - Status Indikator Pengetikan; bawaan false
. Jika Anda menggunakan renderFooter
itu akan menimpa ini.text
(String) - Memasukkan teks; defaultnya adalah undefined
, tetapi jika ditentukan, itu akan menggantikan keadaan internal GiftedChat (misalnya untuk redux; lihat catatan di bawah)placeholder
(String) - Placeholder saat text
kosong; defaultnya adalah 'Type a message...'
messageIdGenerator
(Fungsi) - Menghasilkan id untuk pesan baru. Defaultnya adalah UUID v4, dihasilkan oleh uuiduser
(Objek) - Pengguna mengirimkan pesan: { _id, name, avatar }
onSend
(Fungsi) - Panggilan balik saat mengirim pesanalwaysShowSend
(Bool) - Selalu tampilkan tombol kirim di komposer teks masukan; default false
, tampilkan hanya ketika input teks tidak kosonglocale
(String) - Lokal untuk melokalisasi tanggal. Anda harus terlebih dahulu mengimpor lokal yang Anda butuhkan (mis. require('dayjs/locale/de')
atau import 'dayjs/locale/fr'
)timeFormat
(String) - Format yang digunakan untuk waktu rendering; defaultnya adalah 'LT'
(lihat Format Day.js)dateFormat
(String) - Format yang digunakan untuk merender tanggal; defaultnya adalah 'll'
(lihat Format Day.js)loadEarlier
(Bool) - Mengaktifkan tombol "muat pesan sebelumnya", yang diperlukan untuk infiniteScroll
onLoadEarlier
(Fungsi) - Panggilan balik saat memuat pesan sebelumnyaisLoadingEarlier
(Bool) - Menampilkan ActivityIndicator
saat memuat pesan sebelumnyarenderLoading
(Fungsi) - Merender tampilan pemuatan saat inisialisasirenderLoadEarlier
(Fungsi) - Tombol khusus "Muat pesan sebelumnya".renderAvatar
(Fungsi) - Avatar pesan khusus; disetel ke null
untuk tidak merender avatar apa pun untuk pesan tersebutshowUserAvatar
(Bool) - Apakah akan merender avatar untuk pengguna saat ini; defaultnya false
, hanya tampilkan avatar untuk pengguna lainshowAvatarForEveryMessage
(Bool) - Jika salah, avatar hanya akan ditampilkan ketika pesan berturut-turut berasal dari pengguna yang sama pada hari yang sama; defaultnya false
onPressAvatar
(Fungsi( user
)) - Panggilan balik ketika avatar pesan disadaponLongPressAvatar
(Fungsi( user
)) - Panggilan balik ketika avatar pesan ditekan lamarenderAvatarOnTop
(Bool) - Menampilkan avatar pesan di bagian atas pesan berturut-turut, bukan di bagian bawah; defaultnya false
renderBubble
(Fungsi) - Gelembung pesan khususrenderTicks
(Fungsi( message
)) - Indikator tanda centang khusus untuk menampilkan status pesanrenderSystemMessage
(Fungsi) - Pesan sistem khususonPress
(Fungsi ( context
, message
)) - Panggilan balik ketika gelembung pesan ditekanonLongPress
(Fungsi( context
, message
)) - Panggilan balik ketika gelembung pesan ditekan lama (lihat contoh penggunaan showActionSheetWithOptions()
)inverted
(Bool) - Membalikkan urutan tampilan messages
; standarnya true
renderUsernameOnMessage
(Bool) - Tunjukkan apakah akan menampilkan nama pengguna pengguna di dalam gelembung pesan; defaultnya false
renderUsername
(Fungsi) - Wadah Nama Pengguna KhususrenderMessage
(Fungsi) - Wadah pesan khususrenderMessageText
(Fungsi) - Teks pesan khususrenderMessageImage
(Fungsi) - Gambar pesan khususrenderMessageVideo
(Fungsi) - Video pesan khususimageProps
(Objek) - Props tambahan untuk diteruskan ke komponen <Image>
yang dibuat oleh renderMessageImage
defaultvideoProps
(Objek) - Alat peraga tambahan untuk diteruskan ke komponen video yang dibuat oleh renderMessageVideo
yang diperlukanlightboxProps
(Objek) - Alat peraga tambahan untuk diteruskan ke Lightbox MessageImage
isCustomViewBottom
(Bool) - Tentukan apakah renderCustomView ditampilkan sebelum atau sesudah penayangan teks, gambar, dan video; defaultnya false
renderCustomView
(Fungsi) - Tampilan khusus di dalam gelembungrenderDay
(Fungsi) - Hari khusus di atas pesanrenderTime
(Fungsi) - Waktu khusus di dalam pesanrenderFooter
(Fungsi) - Komponen footer khusus pada ListView, misalnya 'User is typing...'
; lihat App.tsx sebagai contoh. Menggantikan indikator pengetikan default yang terpicu ketika isTyping
benar.renderChatEmpty
(Fungsi) - Komponen khusus untuk dirender di ListView saat pesan kosongrenderChatFooter
(Fungsi) - Komponen khusus untuk dirender di bawah MessageContainer (terpisah dari ListView)renderInputToolbar
(Fungsi) - Wadah pembuat pesan khususrenderComposer
(Fungsi) - Penulis pesan input teks khususrenderActions
(Fungsi) - Tombol tindakan khusus di sebelah kiri pembuat pesanrenderSend
(Fungsi) - Tombol kirim khusus; Anda dapat meneruskan anak-anak ke komponen Send
asli dengan cukup mudah, misalnya dengan menggunakan ikon khusus (contoh)renderAccessory
(Fungsi) - Tindakan khusus kedua di bawah pembuat pesanonPressActionButton
(Fungsi) - Callback ketika tombol Action ditekan (jika disetel, actionSheet
default tidak akan digunakan)bottomOffset
(Bilangan Bulat) - Jarak obrolan dari bagian bawah layar (misalnya berguna jika Anda menampilkan bilah tab)minInputToolbarHeight
(Bilangan Bulat) - Tinggi minimum bilah alat masukan; standarnya adalah 44
listViewProps
(Objek) - Alat peraga tambahan untuk diteruskan ke pesan <ListView>
; beberapa props tidak dapat diganti, lihat kode di MessageContainer.render()
untuk detailnyatextInputProps
(Objek) - Props tambahan untuk diteruskan ke <TextInput>
textInputStyle
(Objek) - Gaya khusus untuk diteruskan ke <TextInput>
multiline
(Bool) - Menunjukkan apakah akan mengizinkan <TextInput>
menjadi beberapa baris atau tidak; standarnya true
.keyboardShouldPersistTaps
(Enum) - Menentukan apakah keyboard akan tetap terlihat setelah ketukan; lihat dokumen <ScrollView>
onInputTextChanged
(Fungsi) - Panggilan balik ketika teks input berubahmaxInputLength
(Bilangan Bulat) - Panjang pembuat pesan maksimum TextInputparsePatterns
(Fungsi) - Pola parse khusus untuk teks parsing asli reaksi yang digunakan untuk menautkan konten pesan (seperti URL dan nomor telepon), misalnya: < GiftedChat
parsePatterns = { ( linkStyle ) => [
{ type : 'phone' , style : linkStyle , onPress : this . onPressPhoneNumber } ,
{ pattern : / #(w+) / , style : { ... linkStyle , styles . hashtag } , onPress : this . onPressHashtag } ,
] }
/>
extraData
(Objek) - Alat peraga tambahan untuk merender ulang FlatList sesuai permintaan. Ini akan berguna untuk merender footer dll.minComposerHeight
(Objek) - Tinggi minimum khusus komposer.maxComposerHeight
(Objek) - Tinggi maksimal komposer khusus.scrollToBottom
(Bool) - Mengaktifkan komponen gulir ke bawah (Defaultnya salah)scrollToBottomComponent
(Fungsi) - Wadah Komponen Gulir Khusus ke BawahscrollToBottomOffset
(Bilangan Bulat) - Offset Tinggi Kustom untuk mulai menampilkan Komponen Gulir Ke Bawah (Defaultnya adalah 200)scrollToBottomStyle
(Objek) - Gaya khusus untuk wadah Komponen BawahalignTop
(Boolean) Mengontrol apakah gelembung pesan muncul di bagian atas obrolan atau tidak (Defaultnya adalah false - gelembung sejajar ke bawah)onQuickReply
(Fungsi) - Panggilan balik saat mengirim balasan cepat (ke server backend)renderQuickReplies
(Fungsi) - Kustomisasi semua tampilan balasan cepatquickReplyStyle
(StyleProp) - Gaya tampilan balasan cepat khususrenderQuickReplySend
(Fungsi) - Tampilan pengiriman balasan cepat khususshouldUpdateMessage
(Fungsi) - Memberi tahu komponen pesan kapan harus memperbarui di luar kasus normal.infiniteScroll
(Bool) - gulir ke atas tanpa batas saat mencapai bagian atas wadah pesan, secara otomatis memanggil fungsi onLoadEarlier jika ada (belum didukung untuk web). Anda perlu menambahkan prop loadEarlier
juga.isStatusBarTranslucentAndroid
(Bool) - Jika Anda menggunakan bilah status tembus pandang di Android, setel opsi ini ke true. Diabaikan di iOS. Prop messages
harus langsung berfungsi dengan Redux. Dalam kebanyakan kasus, hanya ini yang Anda perlukan.
Jika Anda memutuskan untuk menentukan prop text
, GiftedChat tidak akan lagi mengelola status text
internalnya sendiri dan akan sepenuhnya bergantung pada prop Anda. Ini bagus untuk menggunakan alat seperti Redux, tetapi ada satu langkah tambahan yang perlu Anda ambil: cukup terapkan onInputTextChanged
untuk menerima acara pengetikan dan mengatur ulang acara (misalnya untuk menghapus teks onSend
):
< GiftedChat
text = { customText }
onInputTextChanged = { text => this . setCustomText ( text ) }
/* ... */
/>
Jika Anda menggunakan Create React Native App/Expo, tidak diperlukan langkah instalasi khusus Android -- Anda dapat melewati bagian ini. Jika tidak, sebaiknya ubah konfigurasi proyek Anda sebagai berikut.
Pastikan Anda memiliki android:windowSoftInputMode="adjustResize"
di AndroidManifest.xml
Anda :
< activity
android : name = " .MainActivity "
android : label = " @string/app_name "
android : windowSoftInputMode = " adjustResize "
android : configChanges = " keyboard|keyboardHidden|orientation|screenSize " >
Untuk Expo , setidaknya ada 2 solusi untuk memperbaikinya:
KeyboardAvoidingView
setelah GiftedChat. Ini hanya boleh dilakukan untuk Android, karena KeyboardAvoidingView
mungkin bertentangan dengan penghindaran keyboard iOS yang sudah ada di GiftedChat, misalnya: <View style={{ flex: 1 }}>
<GiftedChat />
{
Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />
}
</View>
Jika Anda menggunakan React Navigation, penanganan tambahan mungkin diperlukan untuk memperhitungkan header dan tab navigasi. Properti KeyboardAvoidingView
keyboardVerticalOffset
dapat disetel ke ketinggian header navigasi dan tabBarOptions.keyboardHidesTabBar
dapat disetel agar bilah tab tidak ditampilkan saat keyboard aktif. Karena bug dalam penghitungan ketinggian pada ponsel Android dengan takik, KeyboardAvoidingView
direkomendasikan dibandingkan solusi lain yang melibatkan penghitungan ketinggian jendela.
menambahkan bilah status latar belakang buram di app.json (meskipun android:windowSoftInputMode="adjustResize"
disetel secara internal di aplikasi Android Expo, bilah status transparan menyebabkannya tidak berfungsi): https://docs.expo.io/versions /latest/guides/configuration.html#androidstatusbar
Jika Anda berencana menggunakan GiftedChat
di dalam Modal
, lihat #200.
yarn global add expo-cli
yarn install
expo start
yarn global add expo-cli
yarn install
expo start -w
Tingkatkan versi camilan
yarn add -D react-app-rewired
touch config-overrides.js
module . exports = function override ( config , env ) {
config . module . rules . push ( {
test : / .js$ / ,
exclude : / node_modules[/\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text) / ,
use : {
loader : 'babel-loader' ,
options : {
babelrc : false ,
configFile : false ,
presets : [
[ '@babel/preset-env' , { useBuiltIns : 'usage' } ] ,
'@babel/preset-react' ,
] ,
plugins : [ '@babel/plugin-proposal-class-properties' ] ,
} ,
} ,
} )
return config
}
Anda akan menemukan contoh dan demo web di sini: xcarpentier/gifted-chat-web-demo
Contoh lain dengan Gatsby : xcarpentier/clean-archi-boilerplate
Jangan ragu untuk bertanya kepada saya di Twitter @FaridSafi! atau @xcapetir!
Mencari pakar freelance ReactNative dengan pengalaman lebih dari 14 tahun? Hubungi Xavier dari situs webnya!