尝试使用 react native reanimated 中的插值时出现错误。当不透明度从 1 更改为 0 时，我希望我的按钮平移到负 Y 轴。我看过一些关于此的教程，但有点过时了。我能够查看 文档 ，我做的一切都是正确的。我不知道我的错误在哪里。请看一下：

import { TapGestureHandler,State } from 'react-native-gesture-handler';
import { StyleSheet, View,Text,Image,Dimensions } from 'react-native';
import Animated,{ useSharedValue,Easing, withTiming,useAnimatedStyle, Extrapolate,interpolate } from 'react-native-reanimated';
// import { useState } from 'react';

const {width,height} = Dimensions.get('window')
const { Value } = Animated

export default function LoginComp() {
  const buttonOpacity = useSharedValue(1)
  let animatedStyles = useAnimatedStyle(() => {
    return {
      opacity: buttonOpacity.value,
    };
  });

  let buttonY = interpolate(buttonOpacity.value, {
    inputRange:[0,1],
    outputRange:[100,0],
    extrapolate: Extrapolate.CLAMP
  })
    
  let bgY = interpolate(buttonOpacity.value, {
      inputRange:[0,1],
      outputRange:[-height / 3, 0],
      extrapolate: Extrapolate.CLAMP
  })
    const onStateChange = ({ nativeEvent }) =>  {
      if (nativeEvent.state === State.END) {
        buttonOpacity.value = withTiming(0, {
          duration: 500,
          easing: Easing.out(Easing.exp),
        });
      }
  }
  // console.log(buttonOpacity.value)

  return (
    <View style={styles.logoContainer}>
      <Animated.View style={{flex:1,justifyContent:'center', width:'100%',height:'100%',backgroundColor:'#353839',transform:[{translateY: bgY}] }}>
        <Image style={styles.logo} source={require('../assets/Logo2.png')}/>
      </Animated.View>
        <View style={{ backgroundColor:'#353839',height:height/3 }}>
          <TapGestureHandler onHandlerStateChange={onStateChange}>
            <Animated.View style={[[styles.button, animatedStyles,{transform:[{translateY:buttonY}]}]]}>
                <Text style={{ fontSize:25,fontWeight:'bold' }} >SIGN IN</Text>
            </Animated.View>
          </TapGestureHandler>
        </View>
    </View>
  )
}

const styles = StyleSheet.create({
    logoContainer: {
       
        width: '100%',
        height: '100%',
        justifyContent: 'flex-end'
    },
    logo: {
        position: 'absolute',
        top: 70,
        alignSelf: 'center',
        width: 200,
        height:200,
    },
    button: {
      backgroundColor: '#fff',
      height: 70,
      marginHorizontal: 20,
      borderRadius: 35,
      alignItems: 'center',
      justifyContent: 'center'
    }
});

我已经做了大约 2 天了。我到处都检查过了，但找不到任何有用的信息。我遗漏了什么？