React Native安卓端自定义组件内ScrollView无法滚动 iOS正常求助

问题根因 #

该问题是Native Base 2.x版本安卓端Card/CardItem组件默认拦截触摸事件，搭配Expo 42对应React Native 0.63版本ScrollView的已知兼容问题，iOS端触摸事件冒泡逻辑不同所以运行正常。

修复步骤 #

• 第一步：给<CardItem>组件显式添加button={false}属性，关闭Native Base 2.x CardItem默认的点击容器特性，避免拦截子组件的滚动触摸事件
• 第二步：给<ScrollView>添加安卓适配属性：

  <ScrollView 
    nestedScrollEnabled={true}
    scrollEnabled={true}
    style={{flex: 1}}
  >
    {props.children}
  </ScrollView>
  

• 第三步：确认styles.TopToBottom样式已设置flex: 1，Native Base CardItem默认flexDirection为row横向排列，如果你的布局为横向排布，额外给TopToBottom样式添加flexShrink: 1避免容器被内容直接撑开无滚动空间
• 第四步：如果你的Card容器是自适应高度，给外层<Card>添加maxHeight属性限制最大高度，保证ScrollView可以正确计算可滚动区域高度
• 兜底方案：如果以上修改后仍未修复，给<CardItem>添加pointerEvents="box-none"属性，放开所有子元素的触摸事件响应权限

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