react-native - 嵌套 Touchable 处理 onPress，而父级处理 onLongPress

Question

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

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

我想要长按<Parent>内的任何内容触发Parent.onLongPress ，并短按 child 触发通讯员Child.onPress 。我是从the documentation学到的父 View 可以使用View.props.onStartShouldSetResponderCapture={(event) => true}成为处理该事件的人，但我找不到一种方法来仅针对长按事件而不是所有触摸事件执行此操作。我最初期望我能够使用 onStartShouldSetResponderCapture 中的事件类型但它似乎总是设置为 undefined .

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

Answer 1

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

之前

        <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。