react-native项目中如何实现这种布局

cjwj
  • 628

在React Native中使用flexbox规则来指定某个组件的子元素的布局

clipboard.png

要求:
每行占满的情况下item均分每行,未能占满的一行的与上面占满的一个对齐

我现在的做法是在最后加了一个空的item,如下:

容器:

flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',

item:

flex: 1,
flexBasis: 80

是否有其他实现方法?

回复
阅读 2.5k
1 个回答

如果你不想每次都动态添加补充的话,可以设置item的宽度为屏幕的1/n,内部居中。然后
flexDirection: 'row',
flexWrap: 'wrap',
就可以了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏