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

Question

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

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

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

任何想法如何实现这个美好而干净？谢谢！

Answer 1

有人试图做同样的事情here。但基本的想法是，您希望将read_html组件的子元素设置为具有不同的rvest值。

查看以下代码：

＆＃13;

＆＃13;

ListView

＆＃13;

＆＃13;

＆＃13;

由于您希望有两列宽度相同的列，因此您的主视图包含2个封闭视图，每个视图都具有相同的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);值来获得不同高度的图像。我只是对组件进行硬编码，以便在下面的链接中显示它的外观。您可能希望将其替换为生成动态输入的某种类型的渲染函数。

查看行动中的代码here