React Native FlatList 与列，最后一项宽度

Question

我正在使用 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>

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

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

原文由 Escobar5 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在这里尝试一些事情。

A）为卡片设置一个预定义的宽度（也许等于你设置的高度？）。然后您可以使用 alignItems 将卡片放置在中间或左侧 - 不确定您想要的位置。

B）如果有偶数张卡片，您可以在最后添加一个空视图以填充此空间。我发现这种方法非常笨拙，但在尝试为未来元素留出空间时很有用。

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

我建议对 flexbox 进行更多研究以帮助您解决此问题，因为很难说出这种情况的上下文。我假设上述方法会有所帮助，但如果没有，这里有一些链接供您查看 -

第一个链接

第二个链接

第三个链接链接断开

希望这可以帮助。如果您需要任何进一步的说明 - 只要问

原文由 Ryan Turnbull 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于您的情况，请使用 flex: ¹⁄₂

因此：如果您有 3 列，则您的 项目 应具有 1/（列数）的 flex ，您的项目应具有 flex:¹⁄₃

原文由 Emilius Mfuruki 发布，翻译遵循 CC BY-SA 4.0 许可协议