React Native VirtualizedList獲取滾動並滾動到位置

因此，我在RN 49.3, 我正在尋找一種方法來獲取滾動位置或物品的索引在virtualizedList上可見！React Native VirtualizedList獲取滾動並滾動到位置

PS：當我打開VirtualizedList.js的源代碼，這似乎有props.onScrollEndDrag & props.onScroll

2017-10-12 tjadli

您想記住滾動位置，然後在回到srceen時滾動到該位置？ – parohy

是的，這正是我想要做的。似乎我最初的承諾不是很有效率，因爲它會使橋樑超載。現在，我正試圖在離開屏幕之前存儲元素的索引，並使用scrollToIndex滾動回到正確的位置。但我面臨的問題與virtualizedList到我離開時，我離開屏幕的參考。如果您對此有任何意見，我們將不勝感激 – tjadli

我們使用了不同的方法。它已經改變了很多，但我可以用最初的方法來幫助你。我們在列表中添加了onScrool param。我們將event.nativeEvent.contentOffset.y捕獲到規範中的狀態或一些變量。我們使用了redux。當用戶離開屏幕時，我們將此值保存在數據庫中。第二部分是從componentDidMount的db中加載這個值。你只要把一個ref到列表中的組件，然後調用this.refs.myRef.scrollTo({ x: 0, y: loadedValue, animated: false });

捕獲退出滾動

render() { 
     return (
     <VirtualizedList 
      ref='myRef' 
      onScroll={event => { 
       this.scroll = event.nativeEvent.contentOffset.y; 
      }} 
      ... 
     /> 
    );}

保存安裝

componentDidMount() { 
    AsyncStorage.getItem(key) 
     .then(y => { 
      this.refs.myRef.scrollTo({ x: 0, y, animated: false }); 
     }); 
}

最好的辦法我以後

componentWillUnmount() { 
    AsyncStorage.setItem(key, this.scroll); 
}

負載認爲是在裏面處理它，你連接這個比較onent與商店的名單。我提到了保存到數據庫中，因爲我們確實保存了以後使用的位置，這只是可選的，取決於您的要求。您也可以使用該狀態，但您需要處理不必要的更新

來源

2017-10-16 11:30:09 parohy

感謝您的回答，實際上，最後，我使用了一種類似的方法，通過設置我想要在狀態中滾動的元素的索引和使用scrollToIndex方法。完美的工作！ – tjadli

React Native VirtualizedList獲取滾動並滾動到位置

回答

相關問題