列表状态更新时，react-native flatlist 图像闪烁答案

【问题标题】：react-native flatlist images flicker when list state updating列表状态更新时，react-native flatlist 图像闪烁
【发布时间】：2019-11-28 22:46:52
【问题描述】：

我使用从 Google 的 firebase 后端获取的数据填充了 FlatList。实现是相当标准的，这是一个精简的版本：

export default class Day extends Component {

state = { data : [], today: false }


componentWillMount = async () => {

    const { today } = this.state;
    const { calendarDb } = this.props

    await calendarDb.onNewAgenda({ 
          day : today
        , then: this.parseOnListed 
    })
}

parseOnListed = blob => {

    const { data } = this.state;
    data.push(blob)
    this.setState({ data: data })
}


renderItem = ({ item }) => 
    <Hour data = {item}/>


render = () => 
    <FlatList  
        data         = {this.state.data}
        renderItem   = {this.renderItem}
        keyExtractor = {item => item.ID}
    />

}

问题是每次将新的blob 推入data 时，<Hour data={item}/> 中的<Image/> 组件都会闪烁。这使得该列表在用户体验方面不可行。是什么赋予了？ <Hour/> 也是标准的，或多或少看起来像这样：

const Hour = ({ data }) => 
   <View>
       <Image source={{uri:data.uri}}/>
       <Text> {data.name} </Text>
   </View>

<Text>的内容不闪烁，只有<Image .../>的图片

【问题讨论】：

尝试使用 keyExtractor 来唯一标识一行，这可能是由于整个平面列表在状态更新时重新渲染并且图像被再次下载
在实际代码库中我有 keyExtractor = {item => item.ID + Math.random()} 。但它仍然闪烁
为什么要使用 math.random ？这将使反应每次都认为它是一个新对象，所以这可能是问题
@GuruparanGiritharan 好的，就是这样。解决了这个问题谢谢！

标签： javascript firebase react-native expo

【解决方案1】：

检查keyExtractor 是否获得唯一ID。平面列表在状态更新时重新渲染，并再次下载图像。因为，正如@Guruparan Giritharan 在 cmets 中所说，每一行都不是唯一标识的。

【讨论】：