FlatList ScrollToIndex和onEndReached
FlatList ScrollToIndex和onEndReached
提问于 2020-02-07 07:17:23
我有一个FlatList评论的不同高度的，我需要实现滚动到特定的元素时，打开这个FlatList的模式。
由于某种原因，如果我将onEndReached放入ScrollToIndex中，则会多次调用方法ComponentDidMount。有什么解决办法可以滚动到列表的具体元素吗？
scrollToOffset，initialScroll不是一个选择，因为我有不同的高度。
尝试使用此提示和scrollToIndex内部承诺
如果我再次点击按钮，它可以正常工作，但对于第一次打开，位置略有不同，就像它没有时间滚动什么的。
render() {
const { comments } = this.props;
return (
<FlatList
data={comments}
refreshing={false}
ref = {(ref) => {this.flatListRef = ref}}
keyExtractor={this.keyExtractor}
onRefresh={this.refresh}
renderItem={this.renderItem}
onEndReached={this.fetchMore}
//initialScrollIndex={8} // works only for android
onScrollToIndexFailed={()=>{}}
onEndReachedThreshold={0.01}
// removeClippedSubviews // dont uncomment!!! cause init white list on IOS
ListEmptyComponent={this.renderEmpty}
/>
);
}
componentDidMount (){
let wait = new Promise((resolve) => {
setTimeout(resolve, 400)
});
wait.then( () => {
if(this.props.elementToScrollIndex && this.props.comments) {
this.flatListRef.scrollToIndex({
index: this.props.elementToScrollIndex,
viewPosition: 0
});
}
});
}回答 1
Stack Overflow用户
发布于 2020-02-10 09:37:40
Flatlist可以被看作是一个项目的循环，一个一个地呈现。因此，另一个可能的工作选项是在呈现后滚动到每个项。
renderItem({ item, index }: {item: CommentType, index: number}) {
if(this.flatListRef &&
this.props.elementToScrollIndex &&
index <= this.props.elementToScrollIndex) {
setTimeout(()=>{
this.flatListRef.scrollToIndex({ index: index });
}
}
return (<Comment item={item} index={index} />);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60108757
复制相关文章
相似问题
腾讯云开发者
