React Native 子组件长按不触发父组件 onPress 的解决方法

react native 子组件的长按不触发父组件的onPress

在 React Native 中，如果你希望子组件的长按事件不触发父组件的 onPress 事件，你可以通过以下几种方法来实现：

方法一：使用 TouchableWithoutFeedback 包裹子组件

你可以使用 TouchableWithoutFeedback 包裹子组件，并在子组件的长按事件中调用 e.stopPropagation() 来阻止事件冒泡。

import React from 'react';
import { View, Text, TouchableOpacity, TouchableWithoutFeedback, Alert } from 'react-native';

const ParentComponent = () => {
  const handleParentPress = () => {
    Alert.alert('Parent Pressed');
  };

  const handleChildLongPress = (e) => {
    e.stopPropagation(); // 阻止事件冒泡
    Alert.alert('Child Long Pressed');
  };

  return (
    <TouchableOpacity onPress={handleParentPress} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{ width: 200, height: 200, backgroundColor: 'lightblue', justifyContent: 'center', alignItems: 'center' }}>
        <TouchableWithoutFeedback onLongPress={handleChildLongPress}>
          <View style={{ width: 100, height: 100, backgroundColor: 'lightcoral', justifyContent: 'center', alignItems: 'center' }}>
            <Text>Child Component</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    </TouchableOpacity>
  );
};

export default ParentComponent;

方法二：使用 TouchableOpacity 包裹子组件并处理长按事件

你也可以直接使用 TouchableOpacity 包裹子���件，并在长按事件中阻止事件冒泡。

import React from 'react';
import { View, Text, TouchableOpacity, Alert } from 'react-native';

const ParentComponent = () => {
  const handleParentPress = () => {
    Alert.alert('Parent Pressed');
  };

  const handleChildLongPress = (e) => {
    e.stopPropagation(); // 阻止事件冒泡
    Alert.alert('Child Long Pressed');
  };

  return (
    <TouchableOpacity onPress={handleParentPress} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{ width: 200, height: 200, backgroundColor: 'lightblue', justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity onLongPress={handleChildLongPress} activeOpacity={1}>
          <View style={{ width: 100, height: 100, backgroundColor: 'lightcoral', justifyContent: 'center', alignItems: 'center' }}>
            <Text>Child Component</Text>
          </View>
        </TouchableOpacity>
      </View>
    </TouchableOpacity>
  );
};

export default ParentComponent;

方法三：使用 PanResponder 自定义手势处理

如果你需要更复杂的手势处理，可以使用 PanResponder 来自定义��势处理逻辑。

import React, { useRef } from 'react';
import { View, Text, TouchableOpacity, Alert, PanResponder } from 'react-native';

const ParentComponent = () => {
  const handleParentPress = () => {
    Alert.alert('Parent Pressed');
  };

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: (e, gestureState) => {
        // 处理长按事件
        Alert.alert('Child Long Pressed');
      },
    })
  ).current;

  return (
    <TouchableOpacity onPress={handleParentPress} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{ width: 200, height: 200, backgroundColor: 'lightblue', justifyContent: 'center', alignItems: 'center' }}>
        <View
          {...panResponder.panHandlers}
          style={{ width: 100, height: 100, backgroundColor: 'lightcoral', justifyContent: 'center', alignItems: 'center' }}
        >
          <Text>Child Component</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};

export default ParentComponent;

以上方法都可以有效地阻止子组件的长按事件触发父组件的 onPress 事件。选择哪种方法取决于你的具体需求和代码结构。