ネイティブ才能のチャットに反応する - メッセージが表示されない

Question

私はこのモジュールを単純なチャットに使用していますReact Native Gifted Chat、私はメッセージを送信するための例を試してみます。しかし、何も画面に表示されません（バブルなしテキストなし）、console.log(this.state.messages);のrender機能の中に、メッセージの配列があります。

例Iを用いる：

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

をコンストラクタにはSETSTATEがない、ので、GiftedChatビューの初期レンダリングは、状態オブジェクト内の空のメッセージ・アレイを用いて行われます。

問題は、componentWillMount（）内でsetState（）を呼び出すことです。 componentWillMountに状態を設定しても、再レンダリングは実行されません。

setState（）をComponentDidMount()またはconstructorメソッドに移動し、コンポーネントを再描画する必要があります。つまり、GiftedChatにはメッセージが読み込まれます。 詳細は、このドキュメントを参照してください、 https://reactjs.org/docs/react-component.html#componentwillmount

Answer 2

たぶんあなたが最初のインポートを必要とするが反応し、部品モジュール：

import React, { Component } from "react" 

は、メッセージを送信すると素敵な作業例を持っているネイティブ英才チャットに反応：
https://github.com/FaridSafi/react-native-gifted-chat/tree/master/example