react-native FlatList 中的ListHead

问题原因

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

原来的代码（伪代码）

<FlatList
   data={[1,2,3,4,5]}
   keyExtractor={(item, index) =>index.toString()}
   ListHeaderComponent={()=>
    <View>
       <Image ... />
       ...
   </View>}
   renderItem={({index, item}) =>
   <View>
   ...
   </View>}
/>

解决办法

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

listHeader = () => {
    return (
     <View>
       <Image ... />
        ...
     </View>
)};

render() {
 return
   <FlatList
     data={[1,2,3,4,5]}
     keyExtractor={(item, index) =>index.toString()}
     ListHeaderComponent={this.listHeader()}
     renderItem={({index, item}) =>
       <View>
       ...
       </View>}
  />
}

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

问题解决办法参见

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