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

Posted 2023-05-06

【中文标题】如何通过 React Native 中的视图传递触摸但触发 onPress？

【英文标题】：How can I pass a touch through a view in React Native but trigger the 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 标签。

【参考方案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