当我滚动到顶部时,我想加载更多消息。有一个道具onLoadEarlier
,我在这里传递了一个函数来加载更多消息,但它不起作用。打开聊天框时确实调用了此函数,但我想在滚动到顶部时执行一个函数。
问问题
3266 次
2 回答
3
当您在 GiftedChat 中点击 Scrollview的顶部时,您可以在listViewProps中使用scrollEventThrottle
和onScroll
props来调用回调。对我来说很好。
<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;
}
代码参考取自这里。
于 2019-07-21T05:32:48.680 回答
0
对于那些设置inverted
为true
.
与和:listViewProps
_scrollEventThrottle
onScroll
is_close_to_top({ layoutMeasurement, contentOffset, contentSize }) {
return contentOffset.y <= 100; // 100px from top
}
[...]
<GiftedChat
messages={this.state.messages}
inverted={true}
listViewProps={{
scrollEventThrottle: 400,
onScroll: ({ nativeEvent }) => {
if (this.is_close_to_top(nativeEvent)) {
this.setState({is_loading: true}); // your state
this.load_earlier(); // your function
}
}
}}
onSend={messages => this.send(messages)}
user={{
_id: 1
}}
/>
于 2022-01-03T00:37:22.880 回答