React Native水平FlatList如何将ListHeaderComponent垂直放置在列表上方

失效原因说明 #

水平FlatList的ListHeaderComponent默认会和列表项沿同一横向轴排列，属于滚动内容的一部分，因此无法固定在列表正上方，和垂直FlatList的布局逻辑有明显差异。

可行方案 #

方案1：外层垂直布局拆分（优先推荐） #

直接将自定义头部和水平FlatList放在普通View中垂直排列，完全不会触发同方向ScrollView嵌套警告，实现最简单、性能最优，适合绝大多数场景。
代码示例：

<View style={{flex: 1}}>
  {/* 自定义头部，固定在FlatList正上方 */}
  <CustomHeader>What can we help you find?</CustomHeader>
  {/* 水平滚动FlatList */}
  <FlatList
    horizontal
    keyExtractor={(item) => item.unique_id}
    data={this.props.categories}
    renderItem={({item}) => (
      <TouchableOpacity>
        <View>
          <Image
            style={{height:80, width:100}}
            source={{uri:'some_url'}}
          />
          <Title>{item.category}</Title>
        </View>
      </TouchableOpacity>
    )}
  />
</View>

方案2：头部绝对定位（适用于需要头部跟随FlatList内置交互的场景） #

如果需要头部和FlatList一起参与下拉刷新、上拉加载等内置交互，可以通过绝对定位让头部脱离横向滚动流，固定在FlatList顶部，同时给列表内容设置顶部内边距避开头部遮挡：
代码示例：

<FlatList
  horizontal
  ListHeaderComponent={
    <CustomHeader style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      zIndex: 10 // 保证头部在列表内容上层
    }}>What can we help you find?</CustomHeader>
  }
  contentContainerStyle={{
    paddingTop: 40, // 此处数值需和CustomHeader的实际高度保持一致
    flexGrow: 1
  }}
  keyExtractor={(item) => item.unique_id}
  data={this.props.categories}
  renderItem={({item}) => (
    <TouchableOpacity>
      <View>
        <Image
          style={{height:80, width:100}}
          source={{uri:'some_url'}}
        />
        <Title>{item.category}</Title>
      </View>
    </TouchableOpacity>
  )}
/>

内容的提问来源于stack exchange，提问作者tendai