React Native中Modal嵌套ScrollView时首次点击无响应的原因及解决方案咨询

这个问题我之前在开发React Native项目时刚好碰到过，折腾了一阵才搞明白，下面给你梳理下原因和可行的解决办法：

为什么会出现这个问题？ #

主要有两个核心原因：

1. ScrollView的默认触摸延迟机制：ScrollView（包括基于它封装的FlatList）默认开启了delaysContentTouches属性（默认值为true），这个属性会让ScrollView延迟约200ms来判断你的触摸操作是要滚动还是点击。当Modal刚完成渲染弹出时，这个延迟加上Modal顶层视图的触摸响应链初始化，就会把首次点击误判为滚动的起始操作，直接“吃掉”了点击事件，没传递到内部的Button这类可点击组件。
2. Modal的触摸响应优先级：Modal是挂载在App顶层的独立视图容器，当它刚显示时，系统会重新构建触摸响应链，首次触摸事件可能被Modal的根容器拦截，没有顺利传递到ScrollView内部的子组件上。

另外你提到换成View就正常，是因为View没有内置的滚动触摸识别逻辑，触摸事件会直接沿着响应链传递给子组件，自然不会有延迟或拦截的问题。

可行的解决方案 #

方案一：关闭ScrollView的触摸延迟（最常用） #

直接给ScrollView添加delaysContentTouches={false}属性，关闭它的触摸延迟判断，让ScrollView立刻响应触摸事件，不会把首次点击当成滚动操作。修改后的代码如下：

<Modal visible={categoriesModalVisible} onDismiss={hideCategoriesModal}>
  <ScrollView style={{flex: 1}} delaysContentTouches={false}>
    <Text>Hello!</Text>
    <Button onPress={() => setCategoriesModalVisible(false)}>Hide modal</Button>
  </ScrollView>
</Modal>

如果用的是FlatList，同样可以直接加这个属性，因为FlatList继承了ScrollView的所有属性，效果完全一致。

方案二：调整Modal的触摸响应策略 #

给Modal添加onStartShouldSetResponder={() => false}，让Modal主动放弃触摸事件的拦截权，把触摸响应的优先级直接交给内部的ScrollView。不过这个方案要注意：如果你的Modal是透明的（设置了transparent={true}），并且需要点击Modal外部关闭的话，可能会影响这个关闭逻辑，需要结合你的业务场景灵活调整。

方案三：给可点击组件添加手动触摸响应（不推荐，仅特殊场景用） #

如果上面的方案都不适用，还可以给Button这类可点击组件外面套一层View，给View添加onStartShouldSetResponder={() => true}和onResponderRelease来手动处理触摸事件，不过这个方案比较繁琐，会增加额外的代码量，一般只在有特殊自定义需求时使用。

内容来源于stack exchange