React Native如何实现ScrollView子组件高度响应式适配

• React Native中百分比高度的生效前提是父元素存在明确的可计算高度，ScrollView的内容容器（contentContainer）默认是被内部子元素撑开高度的，本身无固定高度，直接给内部Pressable设置height: '30%'会出现高度计算逻辑异常。
• 给ScrollView设置height:'100%'仅能约束ScrollView本身的可视区域高度，不会给内部内容容器传递确定高度，子元素设置的百分比高度无法正确映射为屏幕高度的对应比例。
• 高度计算异常导致9个Pressable的实际总高度没有正确撑开ScrollView的内容容器，未达到ScrollView触发滚动的高度阈值，因此组件无法滚动，超出可视区域的元素被直接裁切，仅能显示前4个。

要实现Pressable高度随屏幕高度响应式适配，不要在ScrollView的直接子元素上使用百分比高度，通过RN内置的DimensionsAPI获取屏幕实际高度，直接计算对应比例的固定高度即可。

1. 导入依赖并获取屏幕高度

import { View, ScrollView, Pressable, Text, Dimensions } from 'react-native';
// 获取当前设备窗口高度
const screenHeight = Dimensions.get('window').height;
const dummy = [1, 2, 3, 4, 5, 6, 7, 8, 9];

2. 修改组件代码
   移除ScrollView上多余的height:'100%'属性（外层View已经设置flex:1，会自动占满父容器剩余可用空间，无需重复设置高度），将Pressable的高度替换为基于屏幕高度计算的固定值：

<View style={{flex:1}}>
  <ScrollView
    contentContainerStyle={{backgroundColor: 'blue'}}
    style={{backgroundColor: 'red', flex: 1}}
  >
    {
      dummy.map((item, key) => {
        return (
          <Pressable 
            key={key} 
            style={{
              width: '80%', 
              height: screenHeight * 0.3, // 高度为屏幕高度的30%，值确定可正常渲染
              backgroundColor: 'green', 
              borderWidth: 2
            }}
          >
            <Text>{item}</Text>
          </Pressable>
        )
      })
    }
  </ScrollView>
</View>

补充说明：如果需要适配横竖屏切换场景，可以监听Dimensions的窗口尺寸变化事件，在屏幕旋转时动态更新screenHeight的值，保证高度比例始终符合预期。如果不想手动计算高度，也可以尝试给contentContainerStyle添加minHeight: '100%'属性，但该方案在部分低版本安卓机型上存在滚动回弹异常问题，优先使用Dimensions计算高度的方案，兼容性更稳定。

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