阵营的列原住民FlatList，

我使用FlatList显示项目的两列阵营的列原住民FlatList，

<FlatList style={{margin:5}} 
    data={this.state.items} 
    numColumns={2} 
    keyExtractor={(item, index) => item.id } 
    renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> } 
/>

一个列表的卡组件只是一些风格视图的最后一项宽度：

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>

它工作正常，但如果项目数是奇数，最后一行只包含一个项目，并且该项目延伸到屏幕的整个宽度。

如何将项目设置为与其他宽度相同的宽度？

来源

2017-04-19 Escobar5

即使世界的几件事情，你可以尝试在这里。

A）为卡设置一个预先定义的宽度（也许等于您设置的高度？）。然后，您可以使用alignItems以使卡位于中间或左侧 - 不确定您想要的是哪里。 B）如果存在偶数的卡片，则可以在最后添加一个空视图以填充该空间。我发现这种方法非常笨重，但在为未来元素留出空间时非常有用。

C）只需使用alignItems: 'space-between，我喜欢用这个居中的物品，但你必须定义的宽度，或使用类似flex:0.5

我建议研究更进Flexbox，就来帮助你这一点，因为很难说出这种情况的背景。我假设上面的方法会有所帮助，但如果没有，这里有一些链接，你看 -

First link

Second link

Third link

希望这有助于。如果您需要任何进一步的说明 - 只需询问

来源

2017-04-26 08:00:38

B是一个合理的黑客攻击。选项A是多余的，可以简单地设置为通过添加flexWrap来对齐。这种情况下numColumns的用途是什么？ – eden

我不愿意跟B一起去，但是我做到了，尽管这是一个黑客，但它工作正常，而且我不必指定元素的宽度（我希望它们调整到可用宽度） – Escobar5

您可以尝试通过维度获取设备的当前宽度，根据要渲染的列数进行一些数学运算，减去边距并将其设置为minWidth和maxWidth。

例如：

const {height, width} = Dimensions.get('window'); 
const itemWidth = (width - 15)/2; 

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', minWidth: {this.itemWidth}, maxWidth: {this.itemWidth}, height: 130}} ></View>

来源

2017-07-13 15:22:56 skyplor

Ran into同样的情况，我绝对喜欢这个解决方案。不仅更容易，而且更有意义，因为最终我们想在奇数列的情况下限制'flex：1' –

阵营的列原住民FlatList，

回答

相关问题