React Native Listview grid layout with Listview elements that align and append independently

时间秒杀一切 提交于 2020-01-02 04:42:08

问题


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',
}

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!


回答1:


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.

Have a look at the following code:

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

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



来源:https://stackoverflow.com/questions/39316531/react-native-listview-grid-layout-with-listview-elements-that-align-and-append-i

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!