react-native - React Native FlatList 警告

Question

我试图实现一个具有动态项目大小的 FlatList，更具体地说，我的项目有时会占据全屏宽度，有时只有一半，因此设置 numColumns={2} 不起作用，我的解决方法如下所示：

     <FlatList
      ListHeaderComponent={this.header}
      keyExtractor={item => item.id.toString()}
      data={data}
      contentContainerStyle={{ flexDirection: 'row' }}
      renderItem={({ item }) => <Item item={item} />}
    />

一切都按预期工作，项目的宽度通过 item.width 应用。但是问题是每次渲染列表时，我都会收到此日志警告：

Warning: `flexWrap: `wrap`` is not supported with the `VirtualizedList` components.Consider using `numColumns` with `FlatList` instead.

有谁知道这如何影响列表的性能，如果它有影响，我该如何改进我的代码？

这就是我希望它的样子：

标签： react-nativescrollviewreact-native-flatlist

Answer 1

要修复 numColumns={2} 你必须设置它 Horizo​​ntal={false} 所以它变成

      <FlatList
        ListHeaderComponent={this.header}
        keyExtractor={item => item.id.toString()}
        data={data}
        horizontal={false}
        numColumns={2} 
        contentContainerStyle={{ flexDirection: 'row' }}
        renderItem={({ item }) => <Item item={item} />}
       />