如何解决将2个嵌套的平移手势处理程序合并为一个,并使它们一起工作
在我的React Native 0.63.2应用程序中,有2个嵌套的平移手势处理程序(react-native-gesture-handler 1.7
和react-native-reanimated 1.13
)。顶部平移手势处理程序可处理滑动操作,而嵌套的手势处理程序则用于拖动图像。这是代码:
const handleSwipe = event([ //<<==handling swipe event
{
nativeEvent: ({ translationX: dragX,velocityX:velocityX,state }) => block([
cond(eq(state,State.ACTIVE),[
set(translateX,add(offsetX,dragX)),//set(Z,1)
]),cond(eq(state,State.END),timing({ clock,from: translateX,to })),set(offsetX,translateX),cond(not(clockRunning(clock)),[
set(aniIndex,floor(divide(translateX,-width))),//set(scale,1)
//debug("index",index),]),])
},]);
return (
<View style={[styles.container,{width: width * images.length,height,flexDirection: "row",}]}>
<TouchableOpacity style={{width:width*images.length,height:height}} onPress={()=> navigation.goBack()}>
<PanGestureHandler //<<== top pan gesture handler for swipe
ref={pan1Ref}
maxPointers={1}
//waitFor={[panRef]}
simultaneousHandlers={[ pinchRef,rotationRef]}
onGestureEvent={handleSwipe}
onHandlerStateChange={handleSwipe}
>
<Animated.View style={[{width: width*images.length,height:height,},{transform:[{translateX:translateX}]}]}>
{images.map((img_source) => ( //<<==images is an image array
<Animated.View key={img_source.fileName}>
<Swipeable img_source={img_source} /> //<<==Swipeable component has nested pan gesture handler for dragging image around. See code below
</Animated.View>
))}
</Animated.View>
</PanGestureHandler>
</TouchableOpacity>
</View>
);
};
这是嵌套平移手势处理程序的代码:
Swipeable = () => {
const handlePan = event([
{
nativeEvent: ({ translationX: x,translationY: y,state }) =>
block([
set(X,add(x,offsetX)),set(Y,add(y,offsetY)),[
set(offsetX,x)),set(offsetY,add(offsetY,y)),]);
return (
<>
<PanGestureHandler
ref={panRef}
minDist={10}
simultaneousHandlers={[rotationRef,pinchRef,pan1Ref]}
onGestureEvent={handlePan}
onHandlerStateChange={handlePan}
>
}
我的问题是,如何将这两个平移手势处理程序合并为一个?一次只有一个平移手势处理程序,因此滑动和拖动可以同时工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。