使用Listview元素反应Native Listview网格布局,这些元素可以独立对齐和追加

Question

我有一个关于Listview元素对齐的问题,这些元素应该以更加盒装的方式显示而不是以行方式显示.在图片中,您可以看到当前状态,该状态是使用Listview的contentContainerStyle prop中使用的StyleSheet代码生成的:

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

我想要实现的是包装Listview元素,而不是在行换行之后开始新行,因此在Listview元素的顶部没有空格.

知道如何实现这个漂亮干净吗？谢谢!

Answer 1

有人试图在这里做同样的事情。但基本思想是您想要为ListView组件的子元素设置不同的flex值。

看一下下面的代码：

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);

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

请参阅此处的实际代码