如何通过 React Native 中的视图传递触摸但触发 onPress？

【问题标题】：How can I pass a touch through a view in React Native but trigger the onPress?如何通过 React Native 中的视图传递触摸但触发 onPress？
【发布时间】：2021-12-17 23:21:26
【问题描述】：

我正在尝试创建一个可触发其onPress 的全屏可触摸视图，但也将触摸向下传递到其后面的视图。在下面的示例中，我希望在用户滚动滚动视图时调用 onPress 函数。我可以让滚动视图在Pressable 上以pointerEvents="none" 响应，但这样做会使onPress 不会被触发。有没有办法让这两者一起工作？

const styles = StyleSheet.create({
  containingTouchable: {
    position: 'absolute',
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
    backgroundColor: 'rgba(100,100,100,0.3)',
  },
});

const Component = () => {
  <Pressable
      style={styles.containingTouchable}
      onPress={() => {
        console.warn('pressed me');
      }}
  >
    <View></View>
  </Pressable>
  <ScrollView> ... </ScrollView>
}

【问题讨论】：

我认为你必须删除这个问题的 reactjs 标签。

标签： javascript android ios reactjs react-native

【解决方案1】：

我会使用react-native-gesture-handler 解决这个问题。代替Pressable，使用TapGestureHandler。并从react-native-gesture-handler 导入ScrollView。

Rngh 提供了一个名为 simultaneousHandlers 的道具，因此您可以同时收听多个触摸事件。

所以你可以这样做：

const tapGestureHandlerRef = useRef(null);

<TapGestureHandler
    ref={tapGestureHandlerRef}
    onActivated={handleOnPress}
    onHandlerStateChange={handleOnPress}
>
    <ScrollView
     simultaneousHandlers={tapGestureHandlerRef}
    > 
        {content}
    </ScrollView>
  </TapGestureHandler
>

onActivated 和 onHandlerStateChange 都可以触发 onPress 事件，但它们的行为不同。查看文档以了解最适合您的用例：https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh

【讨论】：