Startseite>Programmierbezogen>AI-Quellcode
Herunterladen

Begabter Chat

Die umfassendste Chat-Benutzeroberfläche für React Native und Web

Demo-Web?

Snack GiftedChat-Spielplatz

Sponsor



Coding Bootcamp in Paris, Mitbegründer von Farid Safi

Klicken Sie hier, um mehr zu erfahren



Skalierbare Chat-API/Server, geschrieben in Go

API-Tour | React Native Gifted-Tutorial



Eine komplette App-Engine mit GiftedChat

Schauen Sie sich unseren GitHub an

Merkmale

  • ? react-native-web fähige (seit 0.10.0) Webkonfiguration
  • Schreiben mit TypeScript (seit 0.8.0)
  • Vollständig anpassbare Komponenten
  • Komponistenaktionen (zum Anhängen von Fotos usw.)
  • Frühere Nachrichten laden
  • Nachrichten in die Zwischenablage kopieren
  • Berührbare Links mit React-Native-Parsed-Text
  • Avatar als Initialen des Benutzers
  • Lokalisierte Daten
  • Mehrzeilige Texteingabe
  • InputToolbar vermeidet Tastatur
  • Redux-Unterstützung
  • Systemmeldung
  • Schnellantwortnachrichten (Bot)
  • Tippanzeige

Erste Schritte

Installation

Abhängigkeiten installieren

Garn: 

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

Expo 

npx expo install react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values

Nicht-Messe-Benutzer 

npx pod-install

Richten Sie den React-Native-Safe-Area-Kontext ein

Folgen Sie der Anleitung: React-Native-Safe-Area-Context

Richten Sie React-Native-Reanimated ein

Folgen Sie der Anleitung: React-Native-Reanimated

React-Native-Video und Expo-AV

  • Beide Abhängigkeiten wurden seit 0.11.0 entfernt.
  • Sie können weiterhin ein video bereitstellen, müssen jedoch renderMessageVideo Requisite bereitstellen.

Testen

TEST_ID wird als Konstanten exportiert, die in der Testbibliothek Ihrer Wahl verwendet werden können

Gifted Chat verwendet onLayout um die Höhe des Chat-Containers zu bestimmen. Um onLayout während Ihrer Tests auszulösen, können Sie die folgenden Codebits ausführen. 

 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 ,
    } ,
  } ,
} )

Sie haben eine Frage?

  1. Bitte lesen Sie diese Readme-Datei und finden Sie möglicherweise eine Antwort
  2. Bitte fragen Sie zuerst bei StackOverflow nach: https://stackoverflow.com/questions/tagged/react-native-gifted-chat
  3. Finden Sie Antworten auf bestehende Probleme
  4. Versuchen Sie, Probleme für Probleme aufzubewahren

Beispiel 

 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 ,
      } }
    />
  )
}

Erweitertes Beispiel

Sehen Sie sich App.tsx für eine funktionierende Demo an!

Beispiel „Slack“.

Sehen Sie sich die Dateien in example/example-slack-message an, um ein Beispiel dafür zu finden, wie Sie die Standard-Benutzeroberfläche überschreiben können, um etwas zu erstellen, das eher wie Slack aussieht – mit angezeigten Benutzernamen und allen Nachrichten auf der linken Seite.

Nachrichtenobjekt

zB Chat-Nachricht 

 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
}

zB Systemmeldung 

 {
  _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
}

zB Chat-Nachricht mit Schnellantwortoptionen

Siehe 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' ,
    } ,
  }

Requisiten

  • messageContainerRef (FlatList ref) – Verweis auf die Flatlist
  • textInputRef (TextInput ref) – Verweis auf die Texteingabe
  • messages (Array) – Nachrichten, die angezeigt werden sollen
  • isTyping (Bool) – Zustand des Typisierungsindikators; Standardwert: false . Wenn Sie renderFooter verwenden, wird dies überschrieben.
  • text (String) – Eingabetext; Der Standardwert ist undefined , wenn jedoch angegeben, wird der interne Status von GiftedChat überschrieben (z. B. für Redux; siehe Hinweise unten).
  • placeholder (String) – Platzhalter, wenn text leer ist; Der Standardwert ist 'Type a message...'
  • messageIdGenerator (Funktion) – Generieren Sie eine ID für neue Nachrichten. Standardmäßig ist UUID v4, generiert von uuid
  • user (Objekt) – Benutzer, der die Nachrichten sendet: { _id, name, avatar }
  • onSend (Funktion) – Rückruf beim Senden einer Nachricht
  • alwaysShowSend (Bool) – Schaltfläche „Senden“ im Eingabetext-Composer immer anzeigen; Standardmäßig false , wird nur angezeigt, wenn die Texteingabe nicht leer ist
  • locale (String) – Gebietsschema zum Lokalisieren der Daten. Sie müssen zuerst das benötigte Gebietsschema importieren (z. B. require('dayjs/locale/de') oder import 'dayjs/locale/fr' ).
  • timeFormat (String) – Format zur Verwendung für Renderzeiten; Der Standardwert ist 'LT' (siehe Day.js-Format)
  • dateFormat (String) – Format, das zum Rendern von Datumsangaben verwendet werden soll; Der Standardwert ist 'll' (siehe Day.js-Format)
  • loadEarlier (Bool) – Aktiviert die Schaltfläche „Frühere Nachrichten laden“, die für infiniteScroll erforderlich ist
  • onLoadEarlier (Funktion) – Rückruf beim Laden früherer Nachrichten
  • isLoadingEarlier (Bool) – Zeigt einen ActivityIndicator an, wenn frühere Nachrichten geladen werden
  • renderLoading (Funktion) – Rendern einer Ladeansicht beim Initialisieren
  • renderLoadEarlier (Funktion) – Benutzerdefinierte Schaltfläche „Frühere Nachrichten laden“.
  • renderAvatar (Funktion) – Benutzerdefinierter Nachrichten-Avatar; auf null setzen, um keinen Avatar für die Nachricht darzustellen
  • showUserAvatar (Bool) – Ob ein Avatar für den aktuellen Benutzer gerendert werden soll; Der Standardwert ist false , es werden nur Avatare für andere Benutzer angezeigt
  • showAvatarForEveryMessage (Bool) – Bei „false“ werden Avatare nur angezeigt, wenn eine aufeinanderfolgende Nachricht vom selben Benutzer am selben Tag stammt; Der Standardwert ist false
  • onPressAvatar (Function( user )) – Rückruf, wenn auf einen Nachrichten-Avatar getippt wird
  • onLongPressAvatar (Function( user )) – Rückruf, wenn ein Nachrichten-Avatar lange gedrückt wird
  • renderAvatarOnTop (Bool) – Rendern Sie den Nachrichten-Avatar oben in aufeinanderfolgenden Nachrichten und nicht unten. Der Standardwert ist false
  • renderBubble (Funktion) – Benutzerdefinierte Nachrichtenblase
  • renderTicks (Function( message )) – Benutzerdefinierter Ticks-Indikator zur Anzeige des Nachrichtenstatus
  • renderSystemMessage (Funktion) – Benutzerdefinierte Systemnachricht
  • onPress (Function( context , message )) – Rückruf, wenn eine Nachrichtenblase gedrückt wird
  • onLongPress (Function( context , message )) – Rückruf, wenn eine Nachrichtenblase lange gedrückt wird (siehe Beispiel mit showActionSheetWithOptions() )
  • inverted (Bool) – Kehrt die Anzeigereihenfolge der messages um; Der Standardwert ist true
  • renderUsernameOnMessage (Bool) – Geben Sie an, ob der Benutzername des Benutzers in der Nachrichtenblase angezeigt werden soll. Der Standardwert ist false
  • renderUsername (Funktion) – Benutzerdefinierter Benutzernamen-Container
  • renderMessage (Funktion) – Benutzerdefinierter Nachrichtencontainer
  • renderMessageText (Funktion) – Benutzerdefinierter Nachrichtentext
  • renderMessageImage (Funktion) – Benutzerdefiniertes Nachrichtenbild
  • renderMessageVideo (Funktion) – Benutzerdefiniertes Nachrichtenvideo
  • imageProps (Objekt) – Zusätzliche Requisiten, die an die vom Standard renderMessageImage erstellte <Image> -Komponente übergeben werden sollen
  • videoProps (Objekt) – Zusätzliche Requisiten, die an die durch das erforderliche renderMessageVideo erstellte Videokomponente übergeben werden sollen
  • lightboxProps (Objekt) – Zusätzliche Requisiten, die an die Lightbox von MessageImage übergeben werden sollen
  • isCustomViewBottom (Bool) – Bestimmen Sie, ob renderCustomView vor oder nach den Text-, Bild- und Videoansichten angezeigt wird; Der Standardwert ist false
  • renderCustomView (Funktion) – Benutzerdefinierte Ansicht innerhalb der Blase
  • renderDay (Funktion) – Benutzerdefinierter Tag über einer Nachricht
  • renderTime (Funktion) – Benutzerdefinierte Zeit innerhalb einer Nachricht
  • renderFooter (Funktion) – Benutzerdefinierte Fußzeilenkomponente in der ListView, z. B. 'User is typing...' ; Ein Beispiel finden Sie in App.tsx. Überschreibt den Standardtypisierungsindikator, der ausgelöst wird, wenn isTyping wahr ist.
  • renderChatEmpty (Funktion) – Benutzerdefinierte Komponente zum Rendern in der ListView, wenn Nachrichten leer sind
  • renderChatFooter (Funktion) – Benutzerdefinierte Komponente zum Rendern unterhalb des MessageContainer (getrennt von der ListView)
  • renderInputToolbar (Funktion) – Benutzerdefinierter Nachrichten-Composer-Container
  • renderComposer (Funktion) – Benutzerdefinierter Texteingabe-Nachrichten-Composer
  • renderActions (Funktion) – Benutzerdefinierte Aktionsschaltfläche links vom Nachrichtenersteller
  • renderSend (Funktion) – Benutzerdefinierte Sendeschaltfläche; Sie können untergeordnete Elemente ganz einfach an die ursprüngliche Send Komponente übergeben, um beispielsweise ein benutzerdefiniertes Symbol zu verwenden (Beispiel).
  • renderAccessory (Funktion) – Benutzerdefinierte zweite Aktionszeile unterhalb des Nachrichtenerstellers
  • onPressActionButton (Funktion) – Rückruf, wenn die Aktionstaste gedrückt wird (falls festgelegt, wird das Standard- actionSheet nicht verwendet)
  • bottomOffset (Integer) – Abstand des Chats vom unteren Bildschirmrand (z. B. nützlich, wenn Sie eine Tab-Leiste anzeigen)
  • minInputToolbarHeight (Integer) – Mindesthöhe der Eingabesymbolleiste; Der Standardwert ist 44
  • listViewProps (Objekt) – Zusätzliche Requisiten, die an die Nachrichten <ListView> übergeben werden; Einige Requisiten können nicht überschrieben werden. Weitere Informationen finden Sie im Code in MessageContainer.render()
  • textInputProps (Objekt) – Zusätzliche Requisiten, die an <TextInput> übergeben werden sollen
  • textInputStyle (Objekt) – Benutzerdefinierter Stil, der an <TextInput> übergeben wird
  • multiline (Bool) – Gibt an, ob der <TextInput> aus mehreren Zeilen bestehen darf oder nicht; Standardwert true .
  • keyboardShouldPersistTaps (Enum) – Bestimmt, ob die Tastatur nach einem Tippen sichtbar bleiben soll; siehe <ScrollView> -Dokumente
  • onInputTextChanged (Funktion) – Rückruf, wenn sich der Eingabetext ändert
  • maxInputLength (Integer) – Maximale TextInput-Länge des Nachrichtenkomponisten
  • parsePatterns (Funktion) – Benutzerdefinierte Parse-Muster für React-Native-Parsed-Text, die zum Verknüpfen von Nachrichteninhalten (wie URLs und Telefonnummern) verwendet werden, z. B.: 
 < GiftedChat
   parsePatterns = { ( linkStyle ) => [
     { type : 'phone' , style : linkStyle , onPress : this . onPressPhoneNumber } ,
     { pattern : / #(w+) / , style : { ... linkStyle , styles . hashtag } , onPress : this . onPressHashtag } ,
   ] }
 />
  • extraData (Objekt) – Zusätzliche Requisiten zum erneuten Rendern von FlatList bei Bedarf. Dies ist nützlich zum Rendern von Fußzeilen usw.
  • minComposerHeight (Objekt) – Benutzerdefinierte Mindesthöhe des Komponisten.
  • maxComposerHeight (Objekt) – Benutzerdefinierte maximale Höhe des Komponisten.
  • scrollToBottom (Bool) – Aktiviert die Komponente zum Scrollen nach unten (Standard ist false)
  • scrollToBottomComponent (Funktion) – Benutzerdefinierter „Scroll To Bottom Component“-Container
  • scrollToBottomOffset (Integer) – Benutzerdefinierter Höhenversatz, ab dem mit der Anzeige der Komponente „Nach unten scrollen“ begonnen werden soll (Standard ist 200)
  • scrollToBottomStyle (Objekt) – Benutzerdefinierter Stil für den unteren Komponentencontainer
  • alignTop (Boolean) Steuert, ob die Nachrichtenblasen oben im Chat angezeigt werden oder nicht (Standard ist false – Blasen werden unten ausgerichtet)
  • onQuickReply (Funktion) – Rückruf beim Senden einer schnellen Antwort (an den Backend-Server)
  • renderQuickReplies (Funktion) – Benutzerdefinierte Ansicht aller Schnellantworten
  • quickReplyStyle (StyleProp) – Benutzerdefinierter Schnellantwort-Ansichtsstil
  • renderQuickReplySend (Funktion) – Benutzerdefinierte Schnellantwort- Sendeansicht
  • shouldUpdateMessage (Funktion) – Teilt der Nachrichtenkomponente mit, wann außerhalb der normalen Fälle eine Aktualisierung durchgeführt werden muss.
  • infiniteScroll (Bool) – unendliches Scrollen nach oben, wenn der obere Rand des Nachrichtencontainers erreicht wird, automatisch die Funktion „onLoadEarlier“ aufrufen, falls vorhanden (noch nicht für das Web unterstützt). Sie müssen auch loadEarlier Requisite hinzufügen.
  • isStatusBarTranslucentAndroid (Bool) – Wenn Sie unter Android eine durchscheinende Statusleiste verwenden, legen Sie diese Option auf „true“ fest. Wird unter iOS ignoriert.

Hinweise für Redux

Die messages -Requisite sollte sofort mit Redux funktionieren. In den meisten Fällen ist das alles, was Sie brauchen.

Wenn Sie sich entscheiden, eine text Requisite anzugeben, verwaltet GiftedChat seinen eigenen internen text nicht mehr und überlässt sich vollständig Ihrer Requisite. Das ist großartig für die Verwendung eines Tools wie Redux, aber es gibt noch einen zusätzlichen Schritt, den Sie unternehmen müssen: Implementieren Sie einfach onInputTextChanged um Tippereignisse zu empfangen und Ereignisse zurückzusetzen (z. B. um den Text onSend zu löschen): 

 < GiftedChat
  text = { customText }
  onInputTextChanged = { text => this . setCustomText ( text ) }
  /* ... */
/>

Notizen für Android

Wenn Sie Create React Native App/Expo verwenden, sind keine Android-spezifischen Installationsschritte erforderlich – Sie können diesen Abschnitt überspringen. Andernfalls empfehlen wir, Ihre Projektkonfiguration wie folgt zu ändern.

  • Stellen Sie sicher, dass Sie android:windowSoftInputMode="adjustResize" in Ihrer AndroidManifest.xml haben: 

    < activity
  android : name = " .MainActivity "
  android : label = " @string/app_name "
  android : windowSoftInputMode = " adjustResize "
  android : configChanges = " keyboard|keyboardHidden|orientation|screenSize " >

  • Für die Expo gibt es mindestens zwei Lösungen, um das Problem zu beheben:

    • Hängen Sie KeyboardAvoidingView nach GiftedChat an. Dies sollte nur für Android durchgeführt werden, da KeyboardAvoidingView möglicherweise mit der bereits in GiftedChat integrierten iOS-Tastaturvermeidung in Konflikt steht, z. B.: 
 <View style={{ flex: 1 }}>
   <GiftedChat />
   {
      Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />
   }
</View>

Wenn Sie React Navigation verwenden, ist möglicherweise eine zusätzliche Bearbeitung erforderlich, um Navigationskopfzeilen und -registerkarten zu berücksichtigen. Die Eigenschaft keyboardVerticalOffset von KeyboardAvoidingView kann auf die Höhe des Navigationsheaders festgelegt werden, und tabBarOptions.keyboardHidesTabBar kann so eingestellt werden, dass die Registerkartenleiste nicht angezeigt wird, wenn die Tastatur geöffnet ist. Aufgrund eines Fehlers bei der Berechnung der Höhe auf Android-Telefonen mit Kerben wird KeyboardAvoidingView anderen Lösungen vorgezogen, bei denen die Höhe des Fensters berechnet wird.

  • Hinzufügen einer undurchsichtigen Hintergrundstatusleiste zu app.json (obwohl android:windowSoftInputMode="adjustResize" in den Android-Apps von Expo intern festgelegt ist, funktioniert die durchscheinende Statusleiste nicht): https://docs.expo.io/versions /latest/guides/configuration.html#androidstatusbar

  • Wenn Sie GiftedChat innerhalb eines Modal verwenden möchten, lesen Sie #200.

Hinweise zur lokalen Entwicklung

Einheimisch

  1. Installieren Sie yarn global add expo-cli
  2. Installieren Sie die Abhängigkeiten yarn install
  3. expo start

React-Native-Web

Mit Ausstellung

  1. Installieren Sie yarn global add expo-cli
  2. Installieren Sie die Abhängigkeiten yarn install
  3. expo start -w

Upgrade-Snack-Version

Mit der Create-React-App

  1. yarn add -D react-app-rewired
  2. 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
}

Ein Beispiel und eine Web-Demo finden Sie hier: xcarpentier/gifted-chat-web-demo

Ein weiteres Beispiel mit Gatsby : xcarpentier/clean-archi-boilerplate

Fragen

  • Wie kann ich die Blasenfarbe für jeden Benutzer festlegen?
  • Wie kann ich Stil-Requisiten an das InputToolbar-Design übergeben und dessen Farbe und andere Stileigenschaften anpassen?
  • Wie kann ich die Farbe des Nachrichtenfelds ändern?
  • Gibt es eine Möglichkeit, die Tastatur manuell zu schließen?
  • Ich möchte ein Popover implementieren, das direkt nach dem Klicken auf einen bestimmten Avatar erscheint. Was ist in diesem Fall die beste Implementierung und wie?
  • Warum ist TextInput auf Android versteckt?
  • Wie verwende ich renderLoading?
  • Kann ich MySql verwenden, um die Nachricht zu speichern?

Lizenz

  • MIT

Autor

Stellen Sie mir gerne Fragen auf Twitter @FaridSafi! oder @xcapetir!

Mitwirkende

  • Kevin Cooper Cooperka
  • Kfir Golan kfiroo
  • Bruno Cascio brunocascio
  • Xavier Carpentier xcarpentier
  • Kesha Antonov Kesha-Antonov
  • mehr

Beauftragen Sie einen Experten!

Suchen Sie einen freiberuflichen ReactNative-Experten mit mehr als 14 Jahren Erfahrung? Kontaktieren Sie Xavier über seine Website!

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle