Javascript 一旦手势开始，PanGestureHandler translationY将重置为0，即使我正在向其添加偏移值。这怎么可能？

我已经创建了一个简单的PanGestureHandler，希望它在手势开始时从先前的位置开始。当手势结束时，我将translationY值设置为offsetY值，这非常有效，当手势开始时，我将offsetY（这是上一个translationY）和translationY的总和设置为translationY，在调试时显示正确的翻译值。但这并没有反映在视图上。因为我是新生，我不知道为什么会这样。我也找不到太多关于使用功能组件实现手势处理程序的资源

有没有办法解决这个问题

我的代码：

import React from 'react'
import { Dimensions, Text } from 'react-native'
import { PanGestureHandler, State } from 'react-native-gesture-handler'

import Animated, { add, block, cond, debug, eq, event, Extrapolate, interpolate, set, useCode, useValue } from 'react-native-reanimated';

const {height,width}=Dimensions.get("window")

export default function Pan() {
    const translationY = useValue(0)
    const offsetY = useValue(0)
    const gestureState = useValue(State.UNDETERMINED)

    const onGestureEvent = event([{
        nativeEvent: {
        translationY,
        state: gestureState
        },
    }], { useNativeDriver: true });

    useCode(() => block([
        cond(eq(gestureState, State.BEGAN), [set(translationY, add(translationY, offsetY)),debug('offsetY', translationY)]),
        cond(eq(gestureState, State.END), [set(offsetY, translationY), debug('translateY', offsetY)])
    ]), [])

    const translateY = interpolate(translationY, {
        inputRange: [0, height-height * 45 / 100],
        outputRange: [0, height-height * 45 / 100],
        extrapolate: Extrapolate.CLAMP
    })

    return (
        <PanGestureHandler {...{onGestureEvent}} onHandlerStateChange={onGestureEvent}>
            <Animated.View style={{ height: height * 45 / 100, backgroundColor:'red', width: width, transform: [{ translateY }] }}>
                <Text>PanGesture</Text>
            </Animated.View>
        </PanGestureHandler>
    )
}

从“React”导入React
从“react native”导入{Dimensions，Text}
从“反应本机手势处理程序”导入{PanGestureHandler，State}
从“react native reanimated”导入动画、{add、block、cond、debug、eq、event、Extrapolate、interpolate、set、useCode、useValue}；
const{height，width}=Dimensions.get（“窗口”）
导出默认函数Pan（）{
常量translationY=useValue（0）
const offsetY=useValue（0）
const gestureState=useValue（状态未确定）
const onGestureEvent=事件([{
nativeEvent：{
翻译，
状态：手势状态
},
}]，{useNativeDriver:true}）；
useCode（（）=>块([
cond（eq（gestureState，State.start），[set（translationY，add（translationY，offsetY）），debug（'offsetY'，translationY）]，
cond（eq（gestureState，State.END），[set（offsetY，translationY），debug（'translateY'，offsetY）]）
]), [])
常量translateY=插值（translateY{
输入范围：[0，高度*45/100]，
输出范围：[0，高度*45/100]，
外推：外推
})
返回(
泛河口
)
}

从“React”导入React；
从“react native”导入{维度、文本、视图}；
从“react native手势处理程序”导入{PanGestureHandler}；
导入动画{
外推，
useSharedValue，
使用AnimatedTestureHandler，
插入，
使用动画样式，
}从“反应本土复活”；
const{height，width}=Dimensions.get（“窗口”）；
常量测试：React.FC=（）=>{
const translationY=useSharedValue（0）；
const OnGetureEvent=UseAnimatedGetureHandler(
{
onStart:（ux，ctx）=>{
ctx.y=平移y.value；
},
onActive：（事件，ctx）=>{
translationY.value=event.translationY+ctx.y；
},
},
[translationY.value]，
);
常量animatedStyles=useAnimatedStyle（（）=>{
常量translateY=插值(
翻译价值，
[0，高度-（高度*45）/100]，
[0，高度-（高度*45）/100]，
外推，
);
返回{
高度：（高度*45）/100，
背景颜色：“红色”，
宽度，
转换：[{translateY}]，
};
}，[translationY.value]）；
返回(
泛河口
);
};
导出默认测试；

尝试了这个。但它仍然在触摸时重置为0。我检查了这个，它工作了。在这里，你可以在小吃上试试。它不适用于android和ios。只在网络上有效这完全正确，而且简单得多。但为此，您需要将重新激活的版本升级到最新版本。对于安装，请遵循文档：此代码确实有效。但不幸的是我用的是复活1

import React from "react";
import {Dimensions, Text, View} from "react-native";
import {PanGestureHandler} from "react-native-gesture-handler";
import Animated, {
Extrapolate,
useSharedValue,
useAnimatedGestureHandler,
interpolate,
useAnimatedStyle,
} from "react-native-reanimated";

const {height, width} = Dimensions.get("window");

const Test: React.FC = () => {
const translationY = useSharedValue(0);

const onGestureEvent = useAnimatedGestureHandler(
    {
        onStart: (_, ctx) => {
            ctx.y = translationY.value;
        },
        onActive: (event, ctx) => {
            translationY.value = event.translationY + ctx.y;
        },
    },
    [translationY.value],
);

const animatedStyles = useAnimatedStyle(() => {
    const translateY = interpolate(
        translationY.value,
        [0, height - (height * 45) / 100],
        [0, height - (height * 45) / 100],
        Extrapolate.CLAMP,
    );
    return {
        height: (height * 45) / 100,
        backgroundColor: "red",
        width,
        transform: [{translateY}],
    };
}, [translationY.value]);

return (
    <View style={{height, width, backgroundColor: "yellow"}}>
        <PanGestureHandler {...{onGestureEvent}}>
            <Animated.View style={animatedStyles}>
                <Text>PanGesture</Text>
            </Animated.View>
        </PanGestureHandler>
    </View>
);
};

export default Test;