React Native中ScrollView仅父视图内可滚动的解决方法问询

问题原因 #

在Android端，默认情况下父视图会裁剪超出自身边界的子视图的触摸事件——即使子视图是绝对定位的，超出父视图范围的部分也无法接收到触摸信号，导致ScrollView在该区域无法响应滚动。

解决方案 #

给约束子视图范围的父视图添加pointerEvents="box-none"属性，该属性允许父视图自身响应触摸事件的同时，不对超出其边界的子视图的触摸事件进行拦截。

修改后的代码示例 #

<View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
  {/* 添加pointerEvents="box-none"解决触摸裁剪问题 */}
  <View style={{width: "80%", height: 150, borderWidth: 1}} pointerEvents="box-none">
    <View style={{position: 'absolute', height: 400, width: "80%", backgroundColor: "green", alignSelf: "center"}}>
      <ScrollView>
        <View style={{height: 200, backgroundColor: "red"}} />
        <View style={{height: 200, backgroundColor: "blue"}} />
        <View style={{height: 200, backgroundColor: "yellow"}} />
      </ScrollView>
    </View>
  </View>
</View>

补充说明 #

• 如果父视图不需要响应任何触摸事件，也可以使用pointerEvents="none"，效果类似但父视图自身会失去触摸响应能力。
• 若布局允许，也可以将绝对定位的ScrollView容器从父视图中移出，直接作为上层视图的子元素，从根源上避免父视图的触摸裁剪限制。

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