Question

我有一个简单的屏幕，其中包含以下组件：

<Parent onLongPress={/* do something */}>
 <Child onPress={/* do something */} />
 <Child onPress={/* do something */} />
<Parent>

我希望长按<Parent>中的任何内容以触发Parent.onLongPress，并短按孩子以触发通讯人Child.onPress。我从the documentation中学到，父视图可以使用View.props.onStartShouldSetResponderCapture={(event) => true}来处理事件，但是我无法找到一种方法仅对长按事件而不是对所有触摸事件进行处理。我最初希望能够在onStartShouldSetResponderCapture中使用事件类型，但是似乎总是将其设置为undefined。

如果有人想尝试https://snack.expo.io/@dgellow/arrogant-strawberries，我会创建一个小吃。

Answer 1

我在这里遇到了同样的问题，理想情况下，孩子会在 onPress 过去后“释放”对新闻事件的捕获并让父母的 onLongPress 接管，但我没有找到了一种方法来做到这一点。

在我的实例中有效的解决方案是将 onLongPress 的相同方法添加到父级和子级，因此如果子级接管，则使用传递给它的方法，如果没有，则使用父级调用方法。

注意我已经在我的代码库中使用了这个，但没有尝试下面的特定示例：

const onLongPress = () => alert("long press!");
const onPress = () => alert("short press!");

return (
  <Parent onLongPress={onLongPress}>
   <Child onLongPress={onLongPress} onPress={onPress} />
   <Child onLongPress={onLongPress} onPress={onPress} />
  <Parent>
);

如果您想要添加 onLongPress & onPress 的子组件位于 Native DOM 树的更下方，那么您可以继续向下传递该函数（尽管如果它许多层嵌套很深，但我没有找到其他选择）。

Answer 2

使用 LongPressGestureHandler 中的 react-native-gesture-handler 捕获父组件上的长按事件。

之前

        <Button // custom component
          style={styles.container}
          onLongPress={() => {
            // long press handler
          }}
        >
          {children} // with `onPress`
        </Button>
      );

之后

import {
  LongPressGestureHandler,
  State,
} from 'react-native-gesture-handler';

...
...

        <LongPressGestureHandler
          onHandlerStateChange={({ nativeEvent }) => {
            if (nativeEvent.state === State.ACTIVE) {
              // long press handler
            }
          }}
        >
          <View style={styles.container}>
            {children} // with `onPress`
          </View>
        </LongPressGestureHandler>

请注意，LongPressGestureHandler 的直接后代应该是 View。

由于需要调用作为 props 传递的 onLongPress 函数的多个深度嵌套的子级，我几乎采用上下文方法。

如果您正在使用 react-navigation，那么您已经在使用 react-native-gesture-handler。

嵌套的Touchable可以处理onPress，而父级可以处理onLongPress

2 个答案: