React Native中ScrollView的子元素按百分比设置宽度无效怎么办？

诗谣 Dev 提问于 2026-02-10 03:46:23 阅读 22

移动

在React Native里用ScrollView装了几个卡片组件，给子元素设置了flexBasis: ‘50%’，但它们还是堆在一起显示。我试过加flexGrow:1和flexShrink:1，也调整过ScrollView的flex:1，但宽度还是不按百分比分配…


.cards-container {
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
}

.card-item {
  flex-basis: 50%;
  height: 150px;
  background: #eee;
  margin: 5px;
}

按照常规Flex布局应该能实现两列排列啊，但实际运行时所有卡片都挤在左边，宽度显示为原始固定值。是不是React Native的样式单位处理有问题？或者必须用绝对定位才能实现百分比布局？

组件设计

我来解答赞 7 收藏

反馈

1 条解答

公孙俊蓓 Lv1

试试这个，ScrollView默认是column方向，你得给子元素加flexDirection: 'row'的父容器才行，直接在cards-container加flexWrap: 'wrap'和flexDirection: 'row'。

.cards-container {

  flex: 1,

  flexDirection: 'row',

  flexWrap: 'wrap',

  alignItems: 'center',

  padding: 10

}



.card-item {

  flexBasis: '50%',

  height: 150,

  backgroundColor: '#eee',

  margin: 5

}

2026-02-10 04:00