使用FlatList时renderScrollComponent组件的ref问题

ListView的刷新功能大多都是基于自定义renderScrollComponent,然后通过保存ref进行一些操作,但是基于这种切换到FlatList会出现找不到ref的问题。

FlatList基于VirtualizedList,通过查看VirtualizedList的代码发现,VirtualizedList内部使用了React.cloneElement函数,并且重新定义了ref。

const ret = React.cloneElement(
      this.props.renderScrollComponent(this.props),
      {
        onContentSizeChange: this._onContentSizeChange,
        onLayout: this._onLayout,
        onScroll: this._onScroll,
        onScrollBeginDrag: this._onScrollBeginDrag,
        ref: this._captureScrollRef,
        scrollEventThrottle: 50, // TODO: Android support
        stickyHeaderIndices,
      },
      cells,
    );

那为啥之前的ListView不会呢? 查看ListView代码可以看到

 return cloneReferencedElement(renderScrollComponent(props), {
      ref: this._setScrollComponentRef,
      onContentSizeChange: this._onContentSizeChange,
      onLayout: this._onLayout,
    }, header, bodyComponents, footer);

简单来说使用cloneReferencedElement 可以保留原来的ref。

最后,解决方案------->通过FlatList的ref拿到ScrollComponent。
SectionList没有验证,应该也是同理,毕竟都是基于VirtualizedList。

this._flatList._listRef._scrollRef

你可能感兴趣的:(使用FlatList时renderScrollComponent组件的ref问题)