ReactNative FlatList一次渲染所有項目？

我正在使用ReactNative的新List組件 - FlatList。ReactNative FlatList一次渲染所有項目？

看起來像FlatList一次呈現所有項目，即使單元格實際上並不在屏幕上可見。

<FlatList data={this.props.items} 
      keyExtractor={(item, index) => generateKey()} 
     renderItem={this.renderStrip}/> 

renderItem = ({item}) => { 
    console.warn('rendered!'); 
    return <View style={{height:200, height: 100}} /> 
}

設置30個項目，看起來像'渲染'警告根據項目的總數調用。

我認爲FlatList與Android中的RecycleView的工作方式類似，只有當它顯示在屏幕上時才渲染項目。

我錯過了什麼嗎？它不會降低性能嗎？
我希望它能渲染一個項目，只有當它將要顯示。

來源

2017-08-10 Rom Shiri

我面臨着同樣的問題。所有行都立即呈現，無需向下滾動 – itinance

我在物理設備上看到此問題，但不在模擬器上。在它向屏幕顯示任何內容之前它將呈現所有行。 – Josh

@itinance喬希你是否以某種方式解決這個問題？ – l0rin

它是一樣的。在文檔中，您可以找到以下內容：

爲了約束內存並啓用平滑滾動，內容呈現異步離屏。這意味着可以以比填充率更快的速度滾動，並立即看到空白內容。這是一種權衡，可以根據每個應用程序的需要進行調整，並且我們正在努力在幕後改進它。

因此，它不會一次渲染所有項目。

再說：

這是一個PureComponent這意味着它不會重新渲染，如果道具仍然淺海相等。確保您的renderItem函數所依賴的所有內容都作爲prop（例如extraData）傳遞，而不是更新後的===，否則您的UI可能無法更新更改。這包括數據道具和父組件狀態。

讓我知道你是否需要進一步的細節。

來源

2017-08-10 11:21:42 EnriqueDev

我有一個FlatList 10項。同時只能看到其中的兩個。每個renderChild返回的組件都呈現一個Image。然而，這些圖像的所有請求都是在渲染FlatList時完成的（儘管只有2個項目可見）。 – l0rin

我有一個帶有1000個項目的平面列表，並且啓用了疼痛。它仍然渲染超過100個項目。這很令人毛骨悚然。並且因爲我使用了redux，每次我滑動頁面，所有100個項目並再次增加渲染。 –

FlatList預先渲染太多項目以獲得更好的填充率。我們有類似的問題。我們構建RecyclerListView來解決這些問題。非常類似於RecyclerView，但它只是JS。它比FlatList更快，並在Flipkart進行了戰鬥測試。你可以嘗試一下。

鏈接：https://github.com/Flipkart/ReactEssentials

來源

2017-10-05 13:41:13 naqvitalha

ReactNative FlatList一次渲染所有項目？

回答

相關問題