React Native中ScrollView触碰无onPress组件时无法滚动问题咨询

问题根因 #

你遇到的是React Native 0.64.x版本的已知原生触摸事件分发bug，在搭配Expo 43运行在Android设备时出现概率极高：
无触摸事件绑定的原生组件（如<Text>、普通<View>）会被系统视图层标记为「不消费触摸事件」，该类触摸事件不会向上传递给父级ScrollView的手势响应器，导致ScrollView无法识别滚动动作；而带onPress属性的组件本身会消费触摸事件，会正常将事件冒泡给父层，所以滚动可以正常触发。

解决方案（按优先级排序） #

方案1：升级依赖（推荐） #

该bug已在React Native 0.65+版本被官方修复，对应兼容的Expo版本为44及以上，升级后无需修改任何业务代码即可彻底解决问题。升级执行命令：
expo upgrade 44.0.0

方案2：统一绑定响应器事件（无需升级依赖） #

如果暂时无法升级版本，不需要给每个子组件单独加空onPress，只需要在ScrollView内部的最外层容器上添加onStartShouldSetResponder属性即可统一处理所有子组件的事件传递：

<ScrollView>
  {/* 全局容器添加该属性即可，内部所有子组件无需单独修改 */}
  <View onStartShouldSetResponder={() => true}>
    <Text>无onPress的文本组件</Text>
    <View>普通容器组件</View>
    {/* 原有业务代码全部放在此处即可 */}
  </View>
</ScrollView>

该方案仅需修改1行代码，不会额外侵入业务逻辑，也不会增加多余的性能消耗。

方案3：开启嵌套滚动属性 #

部分场景下仅给ScrollView添加nestedScrollEnabled={true}属性即可修复问题，该属性调整了Android端的嵌套滚动事件传递逻辑，不需要修改其他子组件代码：

<ScrollView nestedScrollEnabled={true}>
  {/* 原有子组件 */}
</ScrollView>

异常排查 #

如果以上方案都无法解决问题，优先检查两个点：

• 项目是否全局重写了<View>/<Text>组件的默认属性，错误修改了pointerEvents等触摸相关配置
• 是否引入了react-native-gesture-handler等第三方手势库，版本与当前React Native 0.64.2不兼容，调整对应手势库的兼容版本即可

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