javascript - 如何在 React Native 中处理带状态的动画计时

Question

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

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.easing((0,base.divide)(newFrameTime, config.duration))' 中，'config.easing' 未定义）**

Answer 1

解决，问题出在导入模块上，我应该这样做：** import { Animated } from "react-native" ; not : ** import Animated from "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>