react-native-reanimated - useAnimatedGestureHandler 不会为我的组件设置动画

Question

我想使用 panGestureHandler 移动我的浮动按钮。但是发现了一些错误，我无法弄清楚。

问题是当我开始手势事件并记录事件数据时，它工作正常，但它在屏幕上不起作用。

    const originPosition = useSharedValue<any>({
        x : 0,
        y : 0
    })

    const currentPosition = useSharedValue({
        x : 0,
        y : 0
    })

    const translationByGesture = useAnimatedStyle(()=>{
        return {
            transform : [{translateX : currentPosition.value.x} , {
                translateY : currentPosition.value.y
            }]
        }

    });



    const HandleGesture = useAnimatedGestureHandler(
        {
            onStart : ( e , ctx) => {
                ctx.startX = currentPosition.value.x;
                ctx.startY = currentPosition.value.y;
                console.log('start' , currentPosition.value.x)
            },
            onActive : (e , ctx) => {
                currentPosition.value.x = ctx.startX + e.translationX;
                currentPosition.value.y = ctx.startY + e.translationY;

                console.log(e.translationX);
            },
            onEnd : (e, ctx) => {
                originPosition.value.x = currentPosition.value.x;
                originPosition.value.y = currentPosition.value.y;

            }
        }
    )

在代码上方，“originPosition”不影响手势事件，请忽略它

下面是我的组件和样式

<PanGestureHandler onGestureEvent={HandleGesture}>
        <Animated.View style={[Styles.wrapper,translationByGesture]}>
        <AnimatedButton
            activeOpacity = {toggle ? 1 : 0.2}
            style={[ container_animation]}
            disabled = {toggle ? true : false}
            onPress={(e) => {
                if(!toggle){
                    // stateAction(true);
                    activateMenu(e);
                }
            
            }}>
            <AnimatedGradient
                style={[
                    Styles.gradient
                    
                    // alreadyAnimated ? { transform: [{ scale: 1.2 }] } : {}
                ]}
                colors={['rgb(238,9,121)', 'rgb(255,106,0 )']}
            >
                <AnimatedSymbol style={[Styles.symbol , symbol_animation]}
                disabled = {toggle ? false : true}
                 onPress={toggle ? () => initializePosition() : () => console.log('not yet')}>
                     
                    <FontAwesome name="home" size={24} color={Colors.main.pink} />

                
                    <NavigateSearch style={[Styles.navs , search_animation]} onPress={toggle ? ()=> toSearch() : () => console.log('not yet')}
                    >
                        <Feather name="search" size={14} color="white" />
                    </NavigateSearch>
                    <NavigateProfile style={[Styles.navs , profile_animation]} onPress={toggle ? () => toProfile() : () => console.log('not yet')}>
                        <Feather name="user" size={14} color="white" />
                    </NavigateProfile>
                    <NavigateSetting style={[Styles.navs , setting_animation]} onPress={toggle ? () => toSetting() : () => console.log('not yet')}>
                        <SimpleLineIcons name="settings" size={14} color="white" />
                    </NavigateSetting>
                    <NavigateCart style={[Styles.navs , cart_animation]} onPress={toggle ? ()=> toCart() : () => console.log('not yet')}>
                        <Ionicons name="cart-outline" size={14} color="white" />
                    </NavigateCart>
                    <NavigateChart style={[Styles.navs , chart_animation]} onPress={toggle ? ()=> toChart() : () => console.log('not yet')}>
                        <FontAwesome5 name="chart-bar" size={14} color="white" />
                    </NavigateChart>
                    <NavigatePost style={[Styles.navs , post_animation]} onPress={toggle ? ()=> toPost() : () => console.log('not yet')}>
                        <Feather name="edit" size={14} color="white" />
                    </NavigatePost>
                </AnimatedSymbol>
            </AnimatedGradient>
        </AnimatedButton>
        </Animated.View>
        </PanGestureHandler>

const Styles = StyleSheet.create({
    gradient: {
        width: 80,
        height: 80,
        borderRadius: 40,
        justifyContent: 'center',
        alignItems: 'center',
    
    },
    wrapper: {
        position : 'absolute',
        bottom :120,
        alignSelf: 'center',
        zIndex : 800,
        height :80,
        width: 80,
        justifyContent: 'center',
        alignItems: 'center',
    },
    topacity : {
        width : '100%',
        height :'100%',
        zIndex : 900,
        elevation : 10
    },
    symbol: {
        width: 30,
        height: 30,
        borderRadius: 100,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        position: 'relative',

    },
    sym :{
            width: 30,
            height: 30,
            borderRadius: 100,
            backgroundColor: 'white',
            justifyContent: 'center',
            alignItems: 'center',
            position: 'relative',
    },
    navs : {
        position: 'absolute',
        width: 20,
        height: 20,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 100,
        zIndex : 1000
    }
});

我发现 PanGestureHandler 必须有 'View' 孩子，所以我用 Animated.View 包裹了我的按钮，但没有用。