React Native FlatList 警告答案

【问题标题】：React Native FlatList WarningReact Native FlatList 警告
【发布时间】：2019-03-21 15:51:09
【问题描述】：

我试图实现一个具有动态项目大小的 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.

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

这就是我想要的样子：

【问题讨论】：

Here
这不起作用
你能把你的代码分享给expo快餐吗？
是的，我做了一个复制品，去掉了所有不必要的东西：snack.expo.io/SJxjkMLM_4

标签： react-native scrollview react-native-flatlist

【解决方案1】：

要修复 numColumns={2} 你必须设置它 Horizontal={false} 所以它变成了

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

【讨论】：

当使用 numColums 时，它会在屏幕外渲染项目，它总是将 2 个项目彼此相邻放置，但是我希望项目占据全屏宽度