react-native – 使用列的React Native FlatList,最后一项宽度

前端之家收集整理的这篇文章主要介绍了react-native – 使用列的React Native 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>

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

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

这几个东西你可以在这里尝试.

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

B)如果存在偶数张卡,则可以在末尾添加一个空的视图,以便填满这个空格.我发现这个方法很笨重,但是当试图为未来的元素留下空间时,这个方法很有用.

C)只需使用alignItems:’space-between,我喜欢使用它来对齐项目,但是你必须定义宽度,或者使用像flex这样的东西:0.5

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

First link

Second link

Third link

希望这可以帮助.如果你需要进一步的澄清 – 只是问

原文链接:https://www.f2er.com/react/301180.html

猜你在找的React相关文章