Overlay/Dialog 内部 ScrollView 滚动卡顿

[dragonwong]

原因

Overlay 做了点击事件，所以会拦截 ScrollView 的触屏事件，导致卡顿。

办法

Overlay 有属性 pointerEvents，可以控制 Overlay 是否可以作为触控事件的目标。（参考：rnx-ui/Overlay at master · rnxteam/rnx-ui）

但是 Dialog 以及衍生的 Alert/Confirm 组件都未对 Overlay 进行设置，此处需要 RNX-UI 进行升级。

作为临时解救方法，在使用上述组件时，如果内部出现了 ScrollView，在其内部包裹 TouchableWithoutFeedback 并绑定处理空函数。（参考：如下）

<Alert>
  <ScrollView>
    <TouchableWithoutFeedback onPress={() => {}}>
      {/* content */}
    </TouchableWithoutFeedback>
  </ScrollView>
</Alert>

相关文章

React Native 中 Touchable* 组件事件捕获问题