如何在React Native中使用状态处理动画计时

Question

当按下TouchableOpacity组件时，我试图增加视图的高度，但它不起作用。我做错了什么？我应该使用生命周期组件吗？

import * as React from "react";
import {
View
} from "react-native";
import * as Animatable from "react-native-animatable";
import Animated from "react-native-reanimated";
const Screen_Height = Dimensions.get("window").height;
class RegistrationView extends React.Component {
state = {
registrationHeight: new Animated.Value(150),
};
increaseHeight = () => {
Animated.timing(this.state.registrationHeight, {
toValue: Screen_Height,
duration: 500
}).start();
};
render() {
return (
<Animated.View
style={{
height: this.state.registrationHeight
}}
>
<TouchableOpacity onPress={() => this.increaseHeight()}>
<View>
<Text>
Welcome, press here.
</Text>
</View>
</TouchableOpacity>
</Animated.View>
)
}

我得到这个错误：

**类型错误：config.easing不是函数。(在"config.leasing((0，base.diff((newFrameTime，config.duration(("中，"config.leaning"未定义(**

Answer 1

解决，问题出在导入模块上，我应该做：**从"react native"导入{Animated}；not：**import动画来自"react native reanimated">

Answer 2

如果您正在谈论TouchableOpacity的视图，请尝试替换代码的这一部分：

<View>
<Text>
Welcome, press here.
</Text>
</View>

这个：

<Animated.View style={{height: this.state.registrationHeight}}>
<Text>
Welcome, press here.
</Text>
</Animated.View>