TypeError： undefined 不是对象(计算 'output.length')

Question

我在尝试使用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'
}
});

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

Answer 1

当您出现这种类型的错误时，会有一些丢失的包

Answer 2

我不能说我知道出了什么问题，但我不得不将useSharedvalue挂钩更改为new Value。我做了很多更改，但我使用了两个不同的值/引用来制作动画，即我使用const buttonOpacity = useSharedValue(1)和使用react native reanimated的插值，这是错误的，相反，它应该是一种单独的方法。

我完成动画的最后一个代码是：

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)

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'
}
});