React native numColumns中断scrollToIndex反应本机平面列表

我使用react native显示项目列表，并检查当前可查看的项目。在“我的项目”中，有一个项目被标记为“大多数”，如果该项目不可见，我会在顶部显示一个链接，用户可以单击该链接并使用

滚动索引

滚动到该项目

scrollToIndex

在不设置

numColumns

的情况下运行良好，当我设置

numColumns={2}

时，我得到

scrollToIndex超出范围：9对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 }}
    />
  )}
/>

setScrolIndex=（）=>{
if（this.state.scrollIndex！==0）{
返回；
}
for（设i=0；i{
this.flatListRef.scrollToIndex({
是的，
索引：this.state.scrollIndex，
});
};
index.toString（）}
ref={ref=>{
this.flatListRef=ref；
}}
showsVerticalScrollIndicator={false}
onViewableItemsChanged={this.handleViewableItemsChanged}
viewabilityConfig={this.viewabilityConfig}
renderItem={（{item，index}）=>(
)}
/>

---

看起来像

FlatList

的

scrollToIndex

如果

numColumns

大于1，则会更改其查看索引的方式

将其称为

scrollToRowIndex

可能更为正确，因为在多列的情况下，它不适用于项索引

就你的情况而言，这在世博会上对我起了作用：

scrollToIndex = () => {
  this.flatListRef.scrollToIndex({
    animated: true,
    index: Math.floor(this.state.scrollIndex / numColumns),
  });
};

---

投票吧！！！！谢谢@Moti azu我们可以通过将

2

替换为numOfColumns@Steffi好主意