React Native中View无法纵向容纳多个CardView、滚动失效如何解决

修复方案 #

核心问题说明 #

1. 原有Card容器是position: absolute定位，未设置明确高度，直接嵌套ScrollView时无法计算可滚动视口范围，导致滚动松手后回弹
2. 之前滚动误包含Header是因为将固定Header组件也放入了滚动容器内
3. 原代码中存在重复定义renderAnimal方法的问题，会导致前面的定义被覆盖，可根据实际需求调整为不同的渲染方法

修改说明 #

仅需要修改render方法中包裹Card的容器部分即可，修改后的核心代码如下：

// 其余代码保持不变
render() {
  if (!this.state.isLoading) {
    return (
      <View style={styles.containerMio}>
        <Image
          style={styles.backgroundImage}
          source={require("../../../../res/images_paint/background/backgroundA_2x.png")}
        />
        <Image
          style={styles.newPaintImage}
          source={require("../../../../res/images_paint/mainScreen/new_paint_ball_2x.png")}
        />
        {/* 固定Header放在ScrollView外部，不会被滚动 */}
        {this.renderToolbar()}
        {/* 替换原View为ScrollView，补充bottom: 0确定滚动区域高度 */}
        <ScrollView
          style={{
            width: "100%",
            alignItems: "center",
            position: "absolute",
            top: sizeWidth(20),
            bottom: 0, // 新增属性，确定容器高度为top到屏幕底部
          }}
          showsVerticalScrollIndicator={false} // 可选，隐藏滚动条
        >
          {this.renderAnimal()}
          {this.renderObject()}
          {this.renderAnimal()}
          {/* 后续新增卡片继续放在此处即可正常滚动 */}
        </ScrollView>
      </View>
    )
  } else {
    return null;
  }
}
// 其余代码保持不变，注意删除重复的renderAnimal方法，避免逻辑冲突

修改后即可实现卡片区域正常滚动，不会出现松手回弹问题，也不会滚动到顶部Header区域。

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