Как обрабатывать время анимации с состоянием в React Native

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

Я получаю эту ошибку:

** Ошибка типа: config.easing не является функцией. (In 'config.easing ((0, base.divide) ( newFrameTime, config.duration)) ',' config.easing 'не определено) **

Answer 1

Решить, проблема была в модуле импорта, я должен сделать: ** import {Animated} из "Reaction-native" ; not: ** импорт анимированных из "реагировать-родной-реанимированный";

Answer 2

если вы говорите о представлении TouchableOpacity, попробуйте заменить эту часть кода:

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

на:

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