React Native Gifted Chat - Nachricht nicht angezeigt

Question

Ich benutze dieses Modul für einfache Chat React Native Gifted Chat, und ich versuche das Beispiel, um eine Nachricht zu senden. Aber nichts erscheint auf dem Bildschirm (keine Blase kein Text), ich console.log(this.state.messages); innerhalb der render Funktion, Array von Nachricht ist da. I

Beispiel verwendet:

import { GiftedChat } from 'react-native-gifted-chat'; 

class Example extends React.Component { 

    state = { 
    messages: [], 
    }; 

    componentWillMount() { 
    this.setState({ 
     messages: [ 
     { 
      _id: 1, 
      text: 'Hello developer', 
      createdAt: new Date(), 
      user: { 
      _id: 2, 
      name: 'React Native', 
      avatar: 'https://facebook.github.io/react/img/logo_og.png', 
      }, 
     }, 
     ], 
    }); 
    } 

    onSend(messages = []) { 
    this.setState((previousState) => ({ 
     messages: GiftedChat.append(previousState.messages, messages), 
    })); 
    } 

    render() { 
    return (
     <GiftedChat 
     messages={this.state.messages} 
     onSend={(messages) => this.onSend(messages)} 
     user={{ 
      _id: 1, 
     }} 
     /> 
    ); 
    } 

} 

Answer 1

Da es keine setState im Konstruktor, Initial-Rendering GiftedChat Ansicht wird mit leeren Nachrichten-Array in Zustandsobjekt durchgeführt.

Problem hier ist, dass Sie SetState() in ComponentWillMount() aufrufen. Das Festlegen des Status in componentWillMount löst kein erneutes Rendering aus.

Verschieben Sie setState() zu ComponentDidMount() oder constructor Methode und es sollte Ihre Komponente neu rendern. Das heißt, GiftedChat wird mit einer Nachricht geladen. diesen doc Siehe für weitere Informationen, https://reactjs.org/docs/react-component.html#componentwillmount

Answer 2

Vielleicht müssen Sie zuerst importiert Reagieren und Component-Modul:

import React, { Component } from "react" 

Reagieren india Gifted Chat mit dem Senden von Nachricht schönes Arbeitsbeispiel hat:
https://github.com/FaridSafi/react-native-gifted-chat/tree/master/example