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

发布时间：2020-12-15 20:51:59 所属栏目：百科来源：网络整理

导读：我正在使用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}/ }/ 卡组

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!