如何在React-Native中制作灵活宽度的2D FlatList

Question

我正在使用本机0.57。我想通过使用Flatlist为非固定宽度和高度固定的框制作2D网格。网格显示之类的东西可以根据屏幕大小自由调整列数。我无法实现。

我可以使用固定列，但是我希望网格根据设备宽度进行调整。框宽度可能是不可预测的，具体取决于它们之间的文本。预先感谢

示例：在gmail中：

Answer 1

您可以使用flex属性，宽度为null。

假设您有一个renderitem函数，并且最多有4列，那么您的平面清单数据中将需要一些“虚拟物品”

<FlatList
          style={{flex:1}}
          data={[1,2,3,4,dummy,dummy,3,4,1,2,dummy,dummy]}
          renderItem={this.renderItem}
          numColumns={4} 
        />

    renderItem = ({ item, index }) => {
      if(item==='dummy'){return <View/>}
        return (
          <View style={{height:100,width:null,flex:1,backgroundcolor:'red'}}/>
        );
      };

使用flex 1填充“虚拟”空间或使用flex 1/2填充屏幕的一半，依此类推。