ReactNative ListView設置數據加載後的初始滾動位置

我有一個包含日期部分標題的事件部分。我需要能夠跳轉到特定日期，並且將初始滾動位置設置爲將來的第一個日期。ReactNative ListView設置數據加載後的初始滾動位置

爲了跳轉到特定的日期，我嘗試在狀態中存儲它們的y位置。

renderSectionHeader= (sectionData, sectionID) => (
     <View 
     onLayout={(event) => { 
      const { y } = event.nativeEvent.layout; 
      const sectionPosition = { [sectionID]: y }; 
      const sectionPositions = Object.assign({}, this.state.sectionPositions, sectionPosition); 
      this.setState({ sectionPositions }); 
     }} 
     ...

我碰到了這種方法的問題，雖然作爲renderSectionHeader不叫上進一步下降的列表（由於懶惰渲染）的元素。

我已經嘗試過從數學角度計算位置，但是這樣會導致每個部分的渲染都在屏幕上顯示，而它正在靠近給定日期。

有沒有辦法實現我所需要的？

https://github.com/facebook/react-native/issues/499

UPDATE

在我的應用程序，我知道所有的行都是完全一樣的高度。

使用contentOffset={{ y: offsetY }}而不是setScroll不起作用，因爲它仍然需要渲染所有項目直到指定的項目才能工作。

使用initialListSize={99999999}確實有效，但會使頁面變得非常緩慢，並且我被警告不要使用它。

更新2

是否可以提供我最初的內容，數據源，然後更新數據之前和當前屏幕上的內容後添加額外的項目？

還是有一個圖書館，我還沒有找到我需要什麼？

來源

2016-07-18 Tom

如果妳存儲加載數據之前y的位置，所以他們r無關了，對不對？ – gran33

存儲的y位置是好的，我可以滾動到這些，問題是隻有一些部分標題呈現由於惰性渲染，所以我不能滾動到列表下的項目 – Tom

「'你不能讓你的蛋糕並吃它''，如果你想延遲加載，所以這是它的意義，你懶加載整個'listView'。我認爲，即使在本機（iOS）上你也會遇到這個問題。 – gran33

看起來這可能很快就會被FlatList解決，它目前在React-Native回購的實驗文件夾中。

https://github.com/facebook/react-native/blob/a3457486e39dc752799b1103ebe606224a8e8d32/Libraries/Experimental/FlatList.js

更好的ListView - FlatList摘要：我們真的需要一個更好的列表視圖 - 所以在這裏它是！

從現有ListView的主要變化：

項目是「虛擬化」，以限制內存 - 也就是說，渲染窗口外的項目被卸載，且它們的內存被回收。這意味着當項目滾出渲染窗口時，實例狀態不會被保留。

否DataSource - 只是一個簡單的data形狀Array<any>的道具。默認情況下，它們預期爲{key: string}的形狀，但可以爲不同的形狀提供rowExtractor定製功能，例如，例如。 graphql數據，您要將id映射到key。請注意，底層VirtualizedList的更靈活。

花式的scrollTo功能：scrollToEnd,scrollToIndex和scrollToItem除了正常的scrollToOffset。

內置拉來刷新支持 - 設置設置onRefresh和refreshing道具。

渲染其他行通常以低優先級完成，任何交互/動畫完成後，除非我們即將耗盡渲染的內容。這應該有助於應用程序感受到更多的響應

組件道具替換渲染功能，例如， ItemComponent: ReactClass<{item: Item, index: number}>取代renderRow: (...) => React.Element<*>

支持動態的項目是使用onLayout自動，或可以提供一個升壓PERF和getItemLayout平滑 scrollToIndex和滾動條的行爲。

可見性回調替換爲更強大的可見性回調，並且至少在Android和iOS上以垂直和水平模式運行，但也可能在其他平臺上運行。額外的權力來自 viewablePercentThreshold，讓客戶決定何時應被視爲可見。

演示：

來源

2017-02-09 16:39:19 Tom

ReactNative ListView設置數據加載後的初始滾動位置

回答

相關問題