React Native 如何实现横向ScrollView高度自适应子元素内容

解决方案 #

你可以通过给横向ScrollView添加alignSelf: 'flex-start'样式属性实现高度自适应子元素，不需要固定高度值，核心原理是这个属性会覆盖父容器默认的alignItems: 'stretch'规则，让ScrollView不会纵向拉伸填满父容器剩余空间，只会收缩到刚好包裹内部所有子元素的高度，哪怕内部子元素高度是动态变化的也可以自动适配。

修改后的代码示例：

<View style={{ flex: 1 }}>
  <ScrollView 
    horizontal 
    style={{ backgroundColor: 'red', alignSelf: 'flex-start' }}
  >
    <View
      style={{ width: 60, height: 30, marginLeft: 5, backgroundColor: 'lime' }}
    />
    {/* 新增不同高度的子元素时，ScrollView会自动适配最高子元素的高度 */}
    <View
      style={{ width: 60, height: 50, marginLeft: 5, backgroundColor: 'blue' }}
    />
  </ScrollView>

  <View style={{ flex: 1, backgroundColor: 'yellow' }} />
</View>

特殊场景兼容 #

如果遇到部分布局下alignSelf不生效的情况，可以给ScrollView外层套一个普通View，给外层View添加alignSelf: 'flex-start'即可。

内容的提问来源于stack exchange，提问作者Raul