将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 (将#修改为@）