React Native FlatList 与列，最后一项宽度 [英] React Native FlatList with columns, Last item width

问题描述

我正在使用 FlatList 显示两列中的项目列表

I'm using a FlatList to show a list of items in two columns

<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}/> }
/>

卡片组件只是一个带有一些样式的视图:

The card component is just a view with some styles:

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

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

It is working fine, but if the number of items is odd, the last row only contains one item and that item stretches to the full width of the screen.

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

How can I set the item to the same width of the others?

推荐答案

您可以在这里尝试一些方法.

Theres a few things you can try here.

A) 为卡片设置预定义的宽度(可能等于您设置的高度?).然后您可以使用 alignItems 将卡片放置在中间或左侧 - 不确定您想要哪个.

A) Setting a pre-defined width for the card ( Maybe equal to the height you've set? ). Then you can use alignItems in order to have the card positioned in the middle or on the left - Unsure as to which you wanted here.

B) 如果有偶数张卡片，您可以在末尾添加一个空视图以填充此空间.我发现这种方法很笨拙，但在为将来的元素留出空间时很有用.

B) If there are an even number of cards, you could add an empty View at the end in order to fill this space. I find this method pretty clunky but useful when trying to leave space for future elements.

C) 只需使用 alignItems: 'space-between，我喜欢用它来居中项目，但您必须定义宽度，或者使用类似 flex:0.5

C) Simply use alignItems: 'space-between, i like to use this to center items, but you would have to define the width, or use something like flex:0.5

我建议更多地研究 flexbox 来帮助你解决这个问题，因为很难说出这种情况的背景.我假设上述方法会有所帮助，但如果没有，这里有一些链接供您查看 -

I suggest researching more into flexbox to help you with this, as it is hard to tell the context of this situation. I'm assuming the above methods will help, but if not, here are some links for you to look at -

第一个链接

第二个链接

第三个链接 _链接坏了

希望这会有所帮助.如果您需要任何进一步的说明 - 只需询问

Hope this helps. If you need any further clarification - just ask

这篇关于React Native FlatList 与列，最后一项宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！