FlatList組件生命週期方法ScrollToIndex ScrollToEnd等

我使用新的FlatList component並希望在生命週期方法（如componentDidMount）中使用ScrollToIndex（或ScrollToEnd）。FlatList組件生命週期方法ScrollToIndex ScrollToEnd等

我有一個讓我們說100個項目的數組，我不想開始渲染第一個項目，但在開始。讓我們說在第50項。當FlatList僅一次顯示一個項目，它的工作根據需要與一些黑客如下所述：https://github.com/facebook/react-native/issues/13202

componentDidMount() { 
    let wait = new Promise((resolve) => setTimeout(resolve, 500)); // Smaller number should work 
    wait.then(() => { 
    this.refs.flatlist.scrollToIndex({index: 4, animated: true}); 
    }); 
}

這個片段使得scrollToIndex運行後一些componentDidMount調用的毫秒。

但是，當我使用FlatList其中視圖包含3x3網格，我根本無法使它運行。當我使用scrollToIndex並且索引超出指定的道具initialNumToRender時，我只收到一個我無法理解的錯誤scrollIndex out of range $ID。提供的數據數組包含所有的數據，例如100個項目。當我使我們成爲scrollToEnd時，它只停留在中間的某個地方而不是最後。對我來說，它看起來像某種錯誤，我不知道如何在初始渲染後滾動到$ X項目。你可以幫我嗎？

我很感激任何形式的幫助或評論。

我在iOS和Android（仿真器和設備）上嘗試了React-Native v0.43.0和v0.44.0，它總是一樣的。

來源

2017-05-08 Johannes Filter

看着VirtualizedList.js，scrollIndex out of range $ID警告在這些條件下發生：

scrollToIndex(params: {animated?: ?boolean, index: number, viewPosition?: number}) { 
    const {data, horizontal, getItemCount} = this.props; 
    const {animated, index, viewPosition} = params; 
    if (!(index >= 0 && index < getItemCount(data))) { 
     console.warn('scrollToIndex out of range ' + index); 
     return; 
    } ....

也許檢查你的道具getItemCount越來越從給定的數據正確的計數。默認情況下，道具使用data.length，因此如果尚未擁有，您可能需要指定自己的道具。

來源

2017-05-09 08:51:38

您是否在FlatList上設置了getItemLayout prop？

檢查它在scrollToIndex的陣營本地代碼說 - 如果你的項目有一組高度雖然https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js#L308

這隻會真正發揮作用。似乎沒有適合高度可變的物品的解決方案。我只設置了initialNumToRender={indexToScrollTo + 1}，然後使用scrollToOffset而不是scrollToIndex（將偏移量設置爲您要滾動到的項目的偏移量），從而設法通過設置變量高度來實現此目的。這具有明顯的性能問題，並且如果您的列表很長或者您的項目具有複雜的渲染效果，那麼這真是不理想。

來源

2017-06-02 15:50:05 JonoH

FlatList組件生命週期方法ScrollToIndex ScrollToEnd等

回答

相關問題