Javascript 嵌套PinchGestureHandler&；PanGestureHandler不在Android中工作

我正在尝试在react native中构建一个具有缩放和平移功能的全屏图像视图。我正在使用react native手势处理程序处理多次触摸。它在iOS上运行良好，但在Android上却没有任何功能

我完全搞不懂为什么这段代码可以在iOS上运行，而不能在Android上运行。我可以确认我的react native手势处理程序设置正在工作，因为我有另一个PanGestureHandler按预期工作

/*********************** Imports ***********************/
import React, { useRef, useEffect } from 'react';
import {
    View, StyleSheet, Animated,
} from 'react-native';

import ZoomImage from './ZoomableImage';
import { vw, vh, isiPhoneX } from '../Styles/StyleUtils';
/********************* End Imports *********************/

/*********************** ImageView Function ***********************/
const ImageView = ({ dismiss, uri, imageLayout }) => {
    const animation = useRef(new Animated.Value(0));

    useEffect(() => {
        Animated.timing(animation.current, {
            toValue: 1,
            duration: 250,
        }).start();
    }, []);

    function closeImage() {
        Animated.timing(animation.current, {
            toValue: 0,
            duration: 250,
        }).start(() => dismiss());
    }

    return (
        <View style={styles.mainContainer}>
            <Animated.View style={[
                styles.container,
                {
                    backgroundColor: animation.current.interpolate({
                        inputRange: [0, 1],
                        outputRange: ["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.5)"],
                    })
                }
            ]}>
                {/* <View style={styles.header}>
                    <TouchableOpacity style={styles.closeBtn} onPress={closeImage}>
                        <Icon name="close" color={blackColor} size={30} />
                    </TouchableOpacity>
                </View> */}
                <ZoomImage dismiss={closeImage} imageStyle={[
                    {
                        left: animation.current.interpolate({
                            inputRange: [0, 1],
                            outputRange: [imageLayout.pageX, 0]  // 0 : 150, 0.5 : 75, 1 : 0
                        }),

                        top: animation.current.interpolate({
                            inputRange: [0, 1],
                            outputRange: [imageLayout.pageY, vh(24)]  // 0 : 150, 0.5 : 75, 1 : 0
                        }),
                        width: animation.current.interpolate({
                            inputRange: [0, 1],
                            outputRange: [imageLayout.width, vw(100)],
                        }),
                        height: animation.current.interpolate({
                            inputRange: [0, 1],
                            outputRange: [imageLayout.height, vw(100)],
                        })
                    }
                ]}
                source={{ uri: uri }} />
            </Animated.View>
        </View>
    );
};
/********************** End ImageView Function *******************/
export default ImageView;

const styles = StyleSheet.create({
    header: {
        marginTop: isiPhoneX() ? 40 : 25,
        alignItems: "flex-end"
    },
    closeBtn: {
        paddingHorizontal: 20,
    },
    mainContainer: {
        position: "absolute",
        width: vw(100),
        height: vh(100)
    },
    container: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0, bottom: 0,
    },
    image: {
        position: "absolute",
    }
});

/******************导入***********************/
从“React”导入React，{useRef，useffect}；
进口{
视图、样式表、动画、，
}从“反应本机”；
从“./ZoomableImage”导入缩放图像；
从“../Styles/StyleUtils”导入{vw，vh，isiPhoneX}；
/*********************最终进口*********************/
/***********************ImageView函数***********************/
常量ImageView=（{dismise，uri，imageLayout}）=>{
const animation=useRef（新的Animated.Value（0））；
useffect（（）=>{
动画。计时（动画。当前{
toValue:1，
时长：250，
}).start（）；
}, []);
函数closeImage（）{
动画。计时（动画。当前{
toValue:0，
时长：250，
}).start（（）=>disclose（））；
}
返回(
{/* 
*/}
);
};
/**********************End ImageView函数*******************/
导出默认图像视图；
const styles=StyleSheet.create({
标题：{
marginTop:isiPhoneX（）？40:25，
对齐项目：“柔性端”
},
关闭BTN：{
水平方向：20，
},
主容器：{
位置：“绝对”，
宽度：vw（100），
高度：vh（100）
},
容器：{
位置：“绝对”，
排名：0，
左:0,，
右：0，下：0，
},
图片：{
位置：“绝对”，
}
});

/******************导入***********************/
从“React”导入React、{useffect、useState、useCallback、useRef}；
从“react native”导入{Animated}；
进口{
国家,，
PanGestureHandler，
钳形触觉处理器
}来自“反应本机手势处理程序”；
从“../Styles/StyleUtils”导入{vw，vh}；
/*********************最终进口*********************/
/***********************缩放图像功能***********************/
常量缩放图像=（道具）=>{
const panRef=useRef（）；
const-pinchhref=useRef（）；
const closeAnimation=useRef（新的动画.ValueXY（{x:0，y:0}））；
const scaleAnimation=useRef（新的动画.Value（1））；
const baseScale=useRef（新的动画.Value（1））；
const scale=useRef（Animated.multiply（baseScale.current，scaleAnimation.current））；
const[lastScale，setLastScale]=useState（1）；
useffect（（）=>{
console.log（'Refs'，panRef）；
}，[panRef.current]）；
const onpanhandlership=useCallback（{nativeEvent}）=>{
console.log（'Native Event'，nativeEvent）；
closeAnimation.current.setValue({
x:nativeEvent.translationX，
y:nativeEvent.translationY
});
}, []);
const onPanHandlerStateChange=useCallback（{nativeEvent}）=>{
console.log（“新Pan事件”，nativeEvent）；
如果（nativeEvent.oldState==State.ACTIVE）{
如果(
nativeEvent.translationY>250
||nativeEvent.velocityY>1200
) {
平行动画([
动画。计时（scaleAnimation.current{
toValue:1，
持续时间：200
}),
动画。计时（baseScale.current{
toValue:1，
持续时间：200
}),
动画。计时（closeAnimation.current{
toValue:{x:0，y:0}，
持续时间：200
})
]).start（（）=>props.discouse（））；
}
否则{
动画。计时（closeAnimation.current{
toValue:{x:0，y:0}，
持续时间：100
}).start（）；
}
}
}，[lastScale]）；
constOnPinchGestureEvent=Animated.event（[{nativeEvent:{scale:scaleAnimation.current}]）；
useCallback（{nativeEvent}）=>{
scaleAnimation.current.setValue（nativeEvent.scale）；
}，[lastScale]）；
const onPinchHandlerStateChange=（{nativeEvent}）=>{
console.log（“新夹点事件”，nativeEvent）；
如果（nativeEvent.oldState==State.ACTIVE）{
const newLastScale=lastScale*nativeEvent.scale；
setLastScale（newLastScale）；
baseScale.current.setValue（newLastScale）；
scaleAnimation.current.setValue（1）；
}
};
返回(
);
};
ZoomableImage.defaultProps={
图像样式：{}，
来源：{uri:}
};
/**********************结束缩放图像功能*******************/
导出默认缩放图像；

---

有人能帮帮我吗？

根据我的说法，你需要在你的庞氏和平氏作品之间加入另一个动画视图（仅作为包装）

返回(

/*********************** Imports ***********************/
import React, { useEffect, useState, useCallback, useRef } from 'react';
import { Animated } from 'react-native';

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

import { vw, vh } from '../Styles/StyleUtils';
/********************* End Imports *********************/

/*********************** ZoomableImage Function ***********************/
const ZoomableImage = (props) => {
    const panRef = useRef();
    const pinchRef = useRef();

    const closeAnimation = useRef(new Animated.ValueXY({ x: 0, y: 0 }));

    const scaleAnimation = useRef(new Animated.Value(1));
    const baseScale = useRef(new Animated.Value(1));
    const scale = useRef(Animated.multiply(baseScale.current, scaleAnimation.current));
    const [lastScale, setLastScale] = useState(1);

    useEffect(() => {
        console.log('Refs', panRef);
    }, [panRef.current]);

    const onPanHandlerGesture = useCallback(({ nativeEvent }) => {
        console.log('Native Event', nativeEvent);
        closeAnimation.current.setValue({
            x: nativeEvent.translationX,
            y: nativeEvent.translationY
        });
    }, []);

    const onPanHandlerStateChange = useCallback(({ nativeEvent }) => {
        console.log('New Pan Event', nativeEvent);
        if (nativeEvent.oldState === State.ACTIVE) {
            if (
                nativeEvent.translationY > 250
                || nativeEvent.velocityY > 1200
            ) {
                Animated.parallel([
                    Animated.timing(scaleAnimation.current, {
                        toValue: 1,
                        duration: 200
                    }),
                    Animated.timing(baseScale.current, {
                        toValue: 1,
                        duration: 200
                    }),
                    Animated.timing(closeAnimation.current, {
                        toValue: { x: 0, y: 0 },
                        duration: 200
                    })
                ]).start(() => props.dismiss());
            }
            else {
                Animated.timing(closeAnimation.current, {
                    toValue: { x: 0, y: 0 },
                    duration: 100
                }).start();
            }
        }
    }, [lastScale]);

    const onPinchGestureEvent = Animated.event([{ nativeEvent: { scale: scaleAnimation.current } }]);

    useCallback(({ nativeEvent }) => {
        scaleAnimation.current.setValue(nativeEvent.scale);
    }, [lastScale]);

    const onPinchHandlerStateChange = ({ nativeEvent }) => {
        console.log('New Pinch Event', nativeEvent);
        if (nativeEvent.oldState === State.ACTIVE) {
            const newLastScale = lastScale * nativeEvent.scale;
            setLastScale(newLastScale);
            baseScale.current.setValue(newLastScale);
            scaleAnimation.current.setValue(1);
        }
    };

    return (
        <PanGestureHandler maxPointers={2} avgTouches onHandlerStateChange={onPanHandlerStateChange}
        minDist={10} onGestureEvent={onPanHandlerGesture} ref={panRef}>
            <PinchGestureHandler ref={pinchRef} simultaneousHandlers={panRef}
            onHandlerStateChange={onPinchHandlerStateChange} onGestureEvent={onPinchGestureEvent}>
                <Animated.Image style={[
                    props.imageStyle,
                    {
                        transform: [
                            { perspective: 1000 },
                            {
                                translateY: closeAnimation.current.y.interpolate({
                                    inputRange: [-vh(25), vh(25)],
                                    outputRange: [-vh(25), vh(25)],
                                    extrapolate: "clamp"
                                })
                            },
                            {
                                translateX: closeAnimation.current.x.interpolate({
                                    inputRange: [-vw(25), vw(25)],
                                    outputRange: [-vw(10), vw(10)],
                                    extrapolate: "clamp"
                                })
                            },
                            {
                                scale: scale.current.interpolate({
                                    inputRange: [1, 2.5],
                                    outputRange: [1, 2.5],
                                    extrapolate: "clamp"
                                })
                            }
                        ]
                    }
                ]} source={props.source} />
            </PinchGestureHandler>
        </PanGestureHandler>
    );
};

ZoomableImage.defaultProps = {
    imageStyle: {},
    source: { uri: "" }
};
/********************** End ZoomableImage Function *******************/
export default ZoomableImage;