仅在滚动后反应原生 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 比较不会显示任何更改。