5

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

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

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

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

4

1 回答 1

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

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

在此处查看实际代码

于 2017-04-11T03:24:06.453 回答