我想在 react-native 有天赋的聊天中显示聊天记录答案

【问题标题】：I want to show chat history in react-native gifted chat我想在 react-native 有天赋的聊天中显示聊天记录
【发布时间】：2025-12-25 20:20:27
【问题描述】：

我正在使用 react-native 天才聊天模块我的要求是我想显示聊天记录对于聊天记录，我使用的是通过服务器获取 10 条消息记录的 API。现在我的聊天工作正常但是，我无法显示我的聊天记录消息有什么可能的解决方案注意：我知道在有天赋的聊天中使用“加载早期功能”

我的代码：

    render() {

            return (

                    <GiftedChat
                      messages={this.state.messages}
                      onSend={(messages) => this.onSend(messages)}
                      user={{username}}
                      onKeyPress={this.typing}
                      value={this.state.messages}
                  onChangeText={ (messages) => this.setState({messages}) }
                  onLoadEarlier={this.onLoadEarlier}
                  isLoadingEarlier={this.state.isLoadingEarlier}
                      />


            );
        }

// This is my API FOR CHAT HISTORY
     getChat() {
            console.log("navnit jha "+this.state.groupId);
            fetch('http://35.154.169.9:4130/baduga/'+groupId+'/getChat', {method: "GET"})
            .then((response) => response.json())
            .then((responseData) => {
                var Data = [];
                if (responseData!==null) {
                    console.log("navnit"+JSON.stringify(responseData));
                    for(var i=0;i<responseData.length;i++){
                        Data.push({
                            msg:responseData[i].msg,
                            username:responseData[i].username
                        });
                    }
                    console.log("chat called "+JSON.stringify(Data));
                    this.setState({dataSource: this.state.dataSource.cloneWithRows(Data)});
                }
            })
            .done();
        }

【问题讨论】：

标签： react-native

【解决方案1】：

@baduga biz，您的“提前加载”按钮显示了吗？

在您的代码中缺少“loadEarlier”道具。

<GiftedChat
  messages={this.state.messages}
  onSend={(messages) => this.onSend(messages)}
  user={{username}}
  onKeyPress={this.typing}
  value={this.state.messages}
  onChangeText={ (messages) => this.setState({messages}) }
  loadEarlier={true} // this was missing
  onLoadEarlier={this.onLoadEarlier}
  isLoadingEarlier={this.state.isLoadingEarlier}
/>

【讨论】：