numColumns中断scrollToIndex反应本机FlatList

时间:2019-04-01 13:13:10

标签: react-native react-native-flatlist

我正在使用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 }}
    />
  )}
/>

expo snack

1 个答案:

答案 0 :(得分:1)

如果FlatList高于1,看起来scrollToIndex的{​​{1}}会改变其查看索引的方式。

将其称为numColumns可能更正确,因为在多列的情况下,它不适用于项目索引。

对于您而言,这对我在世博会上很奏效

scrollToRowIndex