用列的最后一项宽度响应本机列表?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (13)

使用一个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>

提问于
用户回答回答于

(A)为卡片设置预定义的宽度(可能等于您设置的高度?)。然后可以用alignItems

(B)如果有偶数的卡片,您可以在末尾添加一个空视图,以填补这一空白

(C)简单使用alignItems:

用户回答回答于

根据要呈现的列数进行一些计算,减去边距,并将其设置为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>

扫码关注云+社区