ListView的刷新功能大多都是基于自定義renderScrollComponent,然后通過(guò)保存ref進(jìn)行一些操作,但是基于這種切換到FlatList會(huì)出現(xiàn)找不到ref的問(wèn)題。
FlatList基于VirtualizedList,通過(guò)查看VirtualizedList的代碼發(fā)現(xiàn),VirtualizedList內(nèi)部使用了React.cloneElement函數(shù),并且重新定義了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不會(huì)呢? 查看ListView代碼可以看到
return cloneReferencedElement(renderScrollComponent(props), {
ref: this._setScrollComponentRef,
onContentSizeChange: this._onContentSizeChange,
onLayout: this._onLayout,
}, header, bodyComponents, footer);
簡(jiǎn)單來(lái)說(shuō)使用cloneReferencedElement 可以保留原來(lái)的ref。
最后,解決方案------->通過(guò)FlatList的ref拿到ScrollComponent。
SectionList沒(méi)有驗(yàn)證,應(yīng)該也是同理,畢竟都是基于VirtualizedList。
this._flatList._listRef._scrollRef