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.

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

这就是我希望的样子：

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} />}
       />