使用独立对齐和追加的Listview元素来响应本机Listview网格布局 [英] React Native Listview grid layout with Listview elements that align and append independently

问题描述

我对Listview元素的对齐方式有疑问，应该以更多的装箱样式而不是行样式显示.在图片中，您可以看到当前状态，该状态是通过使用Listview的contentContainerStyle属性中使用的StyleSheet代码生成的:

I have a problem regarding the alignment of Listview elements that should be displayed in a more boxed style than in a row style. In the picture you can see the current status, which is produced by using this StyleSheet code used in Listview's contentContainerStyle prop:

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

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

What I want to achieve are wrapped Listview elements without starting a new line after row wrap happened and as a result without having space on the top of of a Listview Element.

有什么主意如何做到这一点?谢谢！

Any idea how to achieve this nice and clean? Thank you!

推荐答案

有人试图做同样的事情

Somebody was trying to do the same thing here. But the basic idea is that you want to set the child elements of the ListView component with different 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值获得不同高度的图像.我只是对组件进行硬编码，以在下面的链接中向您显示它的外观.您可能希望将其替换为某种生成动态输入的渲染函数.

Since you want to have two columns of the same width, you have a main view with 2 enclosing views, each with the same flex value. Inside each view, you can then have images of different heights, using different flex values. I'm just hardcoding the components to show you what it looks like on the link below. You would want to replace it with some type of render function that generates dynamic input.

查看实际运行中的代码此处

See the code in action here

这篇关于使用独立对齐和追加的Listview元素来响应本机Listview网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！