使用独立对齐和附加的 Listview 元素反应本机 Listview 网格布局

我有一个关于 Listview 元素对齐的问题，这些元素应该以比行样式更盒装的样式显示。在图片中，您可以看到当前状态，这是通过使用 Listview 的 contentContainerStyle prop 中使用的样式表代码生成的：

ListViewStyle: {
  flexDirection: 'row',
  flexWrap: 'wrap',
}

我想要实现的是包装 Listview 元素，而无需在行换行后开始新行，因此 Listview 元素顶部没有空间。

知道如何实现这个漂亮又干净的效果吗？谢谢你！

有人试图做同样的事情here https://stackoverflow.com/questions/31205378/masonry-pinterest-columns-using-react-native。但基本的想法是你想要设置的子元素ListView具有不同的组件flex value.

看一下下面的代码：

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class AlignItemsBasics extends Component {
  render() {
    return (
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{
          flex: 1,
          flexDirection: 'column',
        }}>
          <View style={{flex:1, backgroundColor: 'red'}} />
          <View style={{flex: 2, backgroundColor: 'blue'}} />
          <View style={{flex:1, backgroundColor: 'green'}} />
          <View style={{flex:3, backgroundColor: 'grey'}} />
          <View style={{flex: 2, backgroundColor: 'skyblue'}} />

        </View>
        <View style={{
          flex: 1,
          flexDirection: 'column',
        }}>
          <View style={{flex:5, backgroundColor: 'pink'}} />
          <View style={{flex: 2, backgroundColor: 'red'}} />
        </View>
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

由于您想要具有相同宽度的两列，因此您有一个主视图，其中包含 2 个封闭视图，每个视图具有相同的宽度flex价值。在每个视图中，您可以使用不同的方式获得不同高度的图像flex价值观。我只是对组件进行硬编码，以便在下面的链接中向您展示它的外观。您可能希望将其替换为某种生成动态输入的渲染函数。

查看正在运行的代码here http://dabbott.github.io/react-native-web-player/#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20AlignItemsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60alignItems%60%20to%20'flex-start'%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60justifyContent%60%20to%20%60flex-end%60.%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60flexDirection%60%20to%20%60row%60.%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20flexDirection%3A%20'row'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20flexDirection%3A%20'column'%2C%0A%20%20%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A1%2C%20backgroundColor%3A%20'red'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'blue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A1%2C%20backgroundColor%3A%20'green'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A3%2C%20backgroundColor%3A%20'grey'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20flexDirection%3A%20'column'%2C%0A%20%20%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A5%2C%20backgroundColor%3A%20'pink'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'red'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20AlignItemsBasics)%3B