我使用平面列表在两列中显示项目列表

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

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

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

enter image description here

推荐答案

这里有几件事你可以试试.

A) 设置卡片的预定义宽度(可能等于您设置的高度?).然后,你可以使用alignItems,以使卡位于中间或左边-不确定你想要在这里.

B) 如果有偶数张卡片,可以在末尾添加一个空视图以填充此空间.我觉得这个方法很笨重,但在try 为future 元素留出空间时很有用.

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

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

First link

Second link

Third link Link Broken

希望这有帮助.如果你需要任何进一步的澄清,尽管问

React-native相关问答推荐

无法解析 com.google.gms:google-services:4.3.15

嵌套的FlatList内的Incorrect Padding

错误发生意外错误:https://registry.yarnpkg.com/react-native-template-react-native-template-typescript:未找到

react-native-firebase crashlytics 未显示在 firebase 仪表板上

Visual Studio 代码错误:-Failed to start flow Error: Wrong version of Flow. The config specifies version ^0.92.0 but this is version 0.95.1

中彼此相邻对齐(Align) react native

Visual Studio 2017 中的 React Native

在 React Native 中使用多个上下文提供程序的更好方法

如何从 React Native 应用程序打开 Google Play store ?

为什么 Android Studio 强制使用 Android 支持库中的 Androidx?

mapDispatchToProps:有什么意义吗?

Fragment片段内的react-native

使用 React Native 打开 iOS iPad 模拟器

React Native 创建自定义组件/库

react-native图标

try 在 Android 上运行我的 React Native 应用程序时出错

在 React Native 视图上强制 onLayout

如何在 React Native Android 中设置按钮的高度

更改按钮 colored颜色 onPress(切换功能)

react-native图像预取