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