如何处理反应自然状态下的动画时序

Question

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

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

我知道这个错误：

** TypeError: config.easing不是函数。(在'config.easing((0，base.divide)(newFrameTime，config.duration)‘)中，'config.easing’是未定义的) **

Answer 1

解决了，问题是导入模块，我应该做：**导入{动画}从“反应-本机”；不：**导入动画从“反应-本机-恢复”；

Answer 2

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

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

在这方面：

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