我有一个简单的屏幕,其中包含如下组件:
<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 .
最佳答案
使用 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
。
关于react-native - 嵌套 Touchable 处理 onPress,而父级处理 onLongPress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63100501/