React Native FlatList在添加item时候滚动到底部

最新推荐文章于 2024-07-26 16:51:06 发布

原创最新推荐文章于 2024-07-26 16:51:06 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React Native #RN #FlatList #添加 #底部

本文介绍了一种在ReactNative中使用FlatList组件时，如何实现在数据更新后自动滚动到列表底部的方法。通过监听内容尺寸变化并在数据长度增加时请求重绘来实现平滑滚动。

需求：React Native FlatList在每次添加item时候滚动到底部

...

onContentSizeChange = (contentWidth, contentHeight) => {
    const newLength = this.state.data.length;
    newLength > this._lastDataLength && requestAnimationFrame(() => this._flatListRef && this._flatListRef.scrollToEnd({ animated: true }));
    this._lastDataLength = newLength;
  };

  refHandler = ref => {
    this._scrollViewRef = ref;
    //如果你用的是 AnimatedFlatList，这里应该这样写
    //this._scrollViewRef = ref && ref.getNode();
  };

  render() {
    const {data} = this.state;

    return (
      <FlatList
        data={data}
        ref={this.refHandler}
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
        onContentSizeChange={this.onContentSizeChange}
      />
    );
  }

...