我正在使用react native的FlatList来显示项目列表,并检查当前可查看哪些项目。在我的项目中,有一个项目标记为mostUsed
,如果该项目不可见,则在顶部显示一个链接,用户可以单击并使用scrollToIndex
滚动到该项目。 scrollToIndex
在没有设置numColumns
的情况下运作良好,当我设置numColumns={2}
时出现scrollToIndex out of range: 9 vs 4
错误。
setScrollIndex = () => {
if (this.state.scrollIndex !== 0) {
return;
}
for (let i = 0; i < this.state.items.length; i++) {
const items = this.state.items;
if (items[i] && items[i].mostUsed) {
this.setState({
scrollIndex: i,
});
}
}
};
// scroll to index function
scrollToIndex = () => {
this.flatListRef.scrollToIndex({
animated: true,
index: this.state.scrollIndex,
});
};
<FlatList
data={this.state.items}
numColumns={2}
keyExtractor={(item, index) => index.toString()}
ref={ref => {
this.flatListRef = ref;
}}
showsVerticalScrollIndicator={false}
onViewableItemsChanged={this.handleViewableItemsChanged}
viewabilityConfig={this.viewabilityConfig}
renderItem={({ item, index }) => (
<Card
title={item.title}
description={item.description}
mostUsed={item.mostUsed}
style={{ width: item.width }}
/>
)}
/>
答案 0 :(得分:1)
如果FlatList
高于1,看起来scrollToIndex
的{{1}}会改变其查看索引的方式。
将其称为numColumns
可能更正确,因为在多列的情况下,它不适用于项目索引。
对于您而言,这对我在世博会上很奏效
scrollToRowIndex