使用getIteMlayOutProp的flatlist滚动参考

Question

flatlist和滚动方法我有一个小问题。我有带有评论的lactlist，如果添加了新的评论，我想将滚动列表滚到底部，以查看添加的评论。

使用 scrolltoIndex 无法正常工作，本机一直显示出由于缺乏getIteMlayout而显示错误，这是设置此功能的另一个问题 - 每个项目都可以具有不同的大小。

卷轴有一些问题，有时它滚动到页面的几乎底部，有时转到flatlist Props中设置的headerCompontent元素。您有什么想法如何使其滚动到底部？

Answer 1

要使用scrolltoIndex，您需要使用getItemlayout。如果您不打算使用getIteMlayout，则使用它没有意义。这是从反应本文档中获取的一个示例：

class ScrollToExample extends Component {
  getItemLayout = (data, index) => (
    { length: 50, offset: 50 * index, index }
  )

  scrollToIndex = () => {
    let randomIndex = Math.floor(Math.random(Date.now()) * 
    this.props.data.length);
    this.flatListRef.scrollToIndex({animated: true, index: 
    randomIndex});
  }
  scrollToItem = () => {
    let randomIndex = Math.floor(Math.random(Date.now()) * 
    this.props.data.length);
    this.flatListRef.scrollToIndex({animated: true, index: "" + 
    randomIndex});
  }
  render() {
    return (
    <FlatList
      style={{ flex: 1 }}
      ref={(ref) => { this.flatListRef = ref; }}
      keyExtractor={item => item}
      getItemLayout={this.getItemLayout}
      initialScrollIndex={50}
      initialNumToRender={2}
      renderItem={({ item, index}) => (
          <View style={{...style, backgroundColor: this.getColor(index)}}>
            <Text>{item}</Text>
          </View>
        )}
      {...this.props}
    />
);

}}

https://gist.github.com/joshyhargreaves/b8eb67d24ce58a6d8bffb469f7eeaf39

希望这会有所帮助！