如何在 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>
)
}

我收到此错误：

** TypeError：config.easing不是一个函数。（在'config.easing（（0，base.divide）（newFrameTime，config.duration））'中，'config.easing'未定义）**

Answer 1

解决，问题出在导入模块上，我应该这样做： ** import { Animated } from "react-native" ; 不：**从“react-native-reanimated”导入动画；