Question

我在按TouchableOpacity组件时试图增加View的高度，但是它不起作用。我做错了什么？我应该使用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'未定义）** < / p>

Answer 1

解决，问题出在导入模块上，我应该这样做：**从“ react-native”中导入{动画} ;不是：** 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>

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

2 个答案: