僅在滾動后反應原生 FlatList 渲染

Question

我有一個 FlatList，只有在滾動后才能正確呈現。 此外，在刷新時，它會呈現一瞬間，然后再次消失。 FlatList 本身只有 3 個項目。

FlatList 在 View 中是這樣定義的：

 <View style={{flex: 1}}> <FlatList data={cartItems} renderItem={({item}) => ( <CartItemCard event={item.event_name} ticketType={item.title} ticketImage={item.image} price={item.price} /> )} keyExtractor={item => item.id} style={{ flex: 1, backgroundColor: "#49424D", paddingVertical: 60, }} contentContainerStyle={{ alignItems: 'center', paddingVertical: 10, }} /> </View>

你知道我做錯了什么嗎？

Answer 1

這似乎是一個已知問題： https://github.com/facebook/react-native/issues/13316

根據文檔，您應該將 extraData 傳遞給 FlatList 以便它知道重新渲染：

通過將 extraData={selectedId} 傳遞給 FlatList，我們確保 FlatList 本身會在 state 更改時重新渲染。 如果不設置這個 prop，FlatList 將不知道它需要重新渲染任何項目，因為它是一個 PureComponent，並且 prop 比較不會顯示任何更改。