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

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

移动

在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的样式单位处理有问题？或者必须用绝对定位才能实现百分比布局？

组件设计

我来解答赞 12 收藏

反馈

2 条解答

UX青燕 Lv1

React Native的flexBasis百分比支持确实有坑，跟Web CSS表现不一样。直接用width百分比或者计算具体宽度吧。

方案一，用width百分比：

import { Dimensions } from 'react-native';



const screenWidth = Dimensions.get('window').width;



// ScrollView


  contentContainerStyle={styles.cardsContainer}

>

  

  





const styles = StyleSheet.create({

  cardsContainer: {

    flexDirection: 'row',

    flexWrap: 'wrap',

    padding: 10,

  },

  cardItem: {

    width: '50%',  // 用width代替flexBasis

    height: 150,

    backgroundColor: '#eee',

    padding: 5,

    // 如果要间距，用padding或者用width计算减去margin

  },

});

方案二，用Dimensions计算精确宽度，这个更稳：

const cardWidth = (Dimensions.get('window').width - 30) / 2; // 减去padding和margin



cardItem: {

  width: cardWidth,

  height: 150,

  backgroundColor: '#eee',

  margin: 5,

}

几个注意点：

ScrollView要用contentContainerStyle来设置flex布局属性，不是style。contentContainerStyle才是控制内部子元素排列的。

RN里flexBasis的百分比值兼容性差，别用了。width百分比可以用，但配合margin容易超宽，还是Dimensions计算最靠谱。

如果你要响应屏幕旋转，就监听Dimensions变化重新计算宽度，或者用useWindowDimensions这个Hook。

2026-03-01 21:08

公孙俊蓓 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