时间戳

首页 > 解决方案 > 列表状态更新时，react-native flatlist 图像闪烁

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

问题描述

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

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，<Image/>组件都会<Hour data={item}/>闪烁。这使得该列表在用户体验方面不可行。是什么赋予了？<Hour/>也是标准的，或多或少看起来像这样：

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

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

标签： javascriptfirebasereact-nativeexpo

解决方案

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

推荐阅读