FlatList 中的单列列表不支持 columnWrapperStyle

Question

我有一个 Flatlist 水平视图，可以在单行中加载一些项目。我正在使用 columnWrapperStyle 道具来设置我的 Flatlist 容器，但它给出了一个 error 如下：

Invariant Violation: columnWrapperStyle not supported for single column lists

这是我的 code :

<View >
    <FlatList
      columnWrapperStyle={styles.flatListHomeContentContainerStyle}
      horizontal={true}
      data={prop1}
      keyExtractor={(item, index) => item.id.toString()}
      renderItem=...
      .....
    />
</View>

如何解决？

Answer 1

columnWrapperStyle 仅适用当有多于单列时，必须满足条件numColumns > 1。

它不支持显示错误的单个列。参考：docs

Answer 2

我刚刚找到了解决我自己问题的方法。由于 columnWrapperStyle 不能在 FlatList horizontal 中使用，我需要将我的样式应用到 FlatList 中的子项目，它使用了道具 containerStyle 并且它有效。

<FlatList
   horizontal={true}
   renderItem={({ item }) => (
   <Card 
   containerStyle={styles.flatListHomeContentContainerStyle}
   ...
   </Card>
</FlatList>

Answer 3

contentContainerStyle

在水平平面列表中，列数为 1，因此 columnWrapperStyle 将不适用。

使用contentContainerStyle

示例：

         <FlatList
          horizontal
          data={DATA}
          renderItem={renderItem}
          keyExtractor={item => item.id}
          contentContainerStyle={{marginBottom: 10}}
         />

FlatList 中的单列列表不支持 columnWrapperStyle

columnWrapperStyle not supported for single column list in FlatList

react-native

react-native-flatlist

contentContainerStyle