react-native FlatList 中的ListHeaderComponent头中图片闪烁问题

问题原因

头部组件内容包含Image时,是属于FlatList的子组件。当FlatList刷新数据的时候连带着子组件也会刷新

原来的代码(伪代码)

index.toString()}
   ListHeaderComponent={()=>
    
       
       ...
   }
   renderItem={({index, item}) =>
   
   ...
   }
/>

解决办法

把ListHeaderComponent中的代码提取成一个方法listHeader()。
在分配ListHeaderComponent的时候使用()。这样,函数只会被调用一次。


listHeader = () => {
    return (
     
       
        ...
     
)};

render() {
 return
   index.toString()}
     ListHeaderComponent={this.listHeader()}
     renderItem={({index, item}) =>
       
       ...
       }
  />
}

这样就解决了图片闪烁的问题!!!
希望能帮助遇到同样问题的同学们!!!!

问题解决办法参见

https://stackoverflow.com/questions/58722141/react-native-flatlist-header-re-rendering-when-scroll/58724298#58724298

你可能感兴趣的:(react-native FlatList 中的ListHeaderComponent头中图片闪烁问题)