如何通过向上滚动使用react-native-gifted-chat加载更多消息?

时间:2019-03-07 11:00:16

标签: react-native react-native-gifted-chat

当我滚动到顶部时,我想加载更多消息。 有一个道具onLoadEarlier,我在此处传递了一个函数来加载更多消息,但是它不起作用。打开聊天框时确实调用了此函数,但是我想在滚动到顶部时执行一个函数。

1 个答案:

答案 0 :(得分:0)

当您在 GiftedChat 中的Scrollview顶部时,可以在 listViewProps 中使用scrollEventThrottleonScroll道具来调用回调。对我来说很好。

<GiftedChat
          messages={this.state.messages}
          listViewProps={{
            scrollEventThrottle: 400,
            onScroll: ({ nativeEvent }) => {
              if (this.isCloseToTop(nativeEvent)) {
                this.setState({refreshing: true});
                this.loadMoreChat();
              }
            }
          }}
          onSend={messages => this.onSend(messages)}
          user={{
            _id: 2,
          }}
        />

isCloseToTop({ layoutMeasurement, contentOffset, contentSize }) {
    const paddingToTop = 80;
    return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
  }

代码参考摘自here