Question

我使用此模块进行简单聊天React Native Gifted Chat，我尝试使用该示例发送一些消息。但是屏幕上没有显示任何内容（没有气泡没有文字），console.log(this.state.messages);函数中的render，消息数组就在那里。

我使用的例子：

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

也许你需要先导入React和Component模块：

import React, { Component } from "react"

React Native Gifted Chat有一个很好的工作示例，发送消息：
https://github.com/FaridSafi/react-native-gifted-chat/tree/master/example

Answer 2

这里的问题是你在componentWillMount（）中调用setState（）。在componentWillMount中设置状态不会触发重新呈现。

将setState（）移动到ComponentDidMount()或constructor方法，它应该重新渲染您的组件。这意味着，GiftedChat将加载消息。有关详细信息，请参阅此文档， https://reactjs.org/docs/react-component.html#componentwillmount

Answer 3

绝对使用这个你会看到消息

使用渲染气泡

在 renderBubble 函数中

检查此条件（发件人 ID 或当前消息用户 ID）

currentMessage.user._id == this.state.senderData.id) { 
<Bubble 
{...props}
wrapperStyle={{ right: { height: 200, backgroundColor: 'blue', }, 
}} 
/>
} else {

<Bubble {...props} 
wrapperStyle={{ left: { backgroundColor: '#f0f0f0', },}}
 />
 }

在这段代码中，我们区分了左侧或右侧的消息

React Native Gifted Chat - 消息没有显示

3 个答案: