react-native - 在水平平面列表上方垂直对齐 ListHeaderComponent

Question

我有一个水平的 Flatlist，在它的正上方我想添加一个自定义标题。我可以选择将 Flatlist 和自定义标题包装在 ScrollView 中 - 根据 RN 0.61 这不是一个好习惯

VirtualizedLists should never be nested inside plain ScrollViews withthe same orientation

另一种选择是使用:

ListHeaderComponent

 <FlatList
    horizontal
    ListHeaderComponent = {<CustomHeader>What can we help you find?</CustomHeader> }
    keyExtractor = {(item) => item.unique_id }
    data = {this.props.categories}
    contentContainerStyle={{ flexGrow: 1}}
    renderItem={ ({item}) => (
    <TouchableOpacity>
       <View>
        <Image
            style={{
                height:80, 
                width:100}}
            source={{uri:'some_url'}}
        />
        <Title>{item.category}</Title>
      </View>
   </TouchableOpacity>)} 
/>

虽然上述内容适用于垂直平面列表，但在我的用例中，水平平面列表完全失败。
预期的:

实际输出:

可能的修复方法是什么？

Answer 1

您可以像这样进行条件渲染，只是一种解决方法

{this.props.category.length ? <CustomHeader>What can we help you find?</CustomHeader> : null}

<FlatList
    horizontal
    keyExtractor = {(item) => item.unique_id }
    data = {this.props.categories}
    contentContainerStyle={{ flexGrow: 1}}
    renderItem={ ({item}) => (
    <TouchableOpacity>
       <View>
        <Image
            style={{
                height:80, 
                width:100}}
            source={{uri:'some_url'}}
        />
        <Title>{item.category}</Title>
      </View>
   </TouchableOpacity>)} 
/>