TypeError: undefined is not an object（评估'output.length'）

Question

尝试使用来自 react native reanimated 的插值时出现错误。 当不透明度从 1 - 0 更改时，我希望我的 go 按钮转换为负 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天了。 我到处检查，但找不到任何有用的信息。 我错过了什么？

Answer 1

当你是那种类型的错误时，有一些缺少的包

Answer 2

我不能说我知道出了什么问题，但我必须将 useSharedvalue 挂钩更改为新值。 我做了很多更改，但我使用了两个不同的值/引用来制作动画，即我使用的是const buttonOpacity = useSharedValue(1)并使用 react-native-reanimated 的插值，这是错误的，而是应该作为自己的一种方法。

我完成 animation 的最终代码是：

import { TapGestureHandler,State } from 'react-native-gesture-handler';
import { StyleSheet, View,Text,Image,Dimensions,Easing } from 'react-native';
import Animated from 'react-native-reanimated';
import React from 'react';

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

export default function LoginComp() {
  let buttonOpacity = new Value(1)
  // let fadeAnim = useRef(new Value(1)).current;
  // let animatedStyles = useAnimatedStyle(() => {
  //   return {
  //     opacity: buttonOpacity,
  //   };
  // });
    
    const onStateChange = ({ nativeEvent }) =>  {
      if (nativeEvent.state === State.END) {
            
            Animated.timing(buttonOpacity, {
              toValue: 0,
              duration: 500,
              easing: Easing.in
            }).start();
      }
  }
  const buttonY = buttonOpacity.interpolate({
    inputRange: [0, 1],
    outputRange: [100, 0],
    extrapolate: Extrapolate.CLAMP
  })

  const bgY = buttonOpacity.interpolate({
    inputRange: [0, 1],
    outputRange: [-height / 3, 0],
    extrapolate: Extrapolate.CLAMP
  })
  // console.log(buttonOpacity)

  return (
    <View style={styles.logoContainer}>
      <Animated.View style={{ flex:1,width:'100%',height:'100%',justifyContent:'center', backgroundColor: '#353839',transform:[{ translateY:bgY }] }}>
        <Image style={styles.logo} source={require('../assets/Logo2.png')}/>
      </Animated.View>
        <View style={{ height:height/3,position:'absolute',width:'100%' }}>
          <TapGestureHandler onHandlerStateChange={onStateChange}>
            <Animated.View style={{...styles.button, opacity: buttonOpacity, 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'
    }
});