Не могу найти переменную в реагировать на родной

Question

Я пытаюсь создать приложение в режиме «native native» и по-прежнему получаю сообщение об ошибке «1001 *» в функции, которая должна постепенно увеличивать изображение, а затем уменьшать изображение в зависимости от нажатия пользователем кнопки.

Я пробовал несколько вещей, таких как использование оператора let и попытка изменить местоположение кода в классе.

вот код для кнопки и анимации

import React, { Component } from "react";
import {
  Image,
  Animated,
  Easing,
  StyleSheet,
  TouchableWithoutFeedBack
} from "react-native";

const styles = StyleSheet.create({
  info: {
    // for info button
    height: 50,
    width: 50,
    flex: 1,
    position: "absolute",
    left: 315,
    bottom: -675
  }
});

class Info extends Component<Props> {
  state = { opacity: new Animated.Value(0) };
  infoScale = opacity.interpolate({      
      inputRange: [0, 1],
      outputRange: [0.85, 1],
  });
  transformStyle = {
    ...styles.image,
    transform: [{ opacity: infoScale }]
  };
  render() {
    return (
      <TouchableWithoutFeedBack
        onPressIn={() => {
          scaleValue.setValue(0);
          Animated.timing(opacity, {
            toValue: 1,
            duration: 250,
            easing: Easing.linear,
            useNativeDriver: true
          }).start();
        }}
        onPressOut={() => {
          Animated.timing(opacity, {
            toValue: 0,
            duration: 100,
            easing: Easing.linear,
            useNativeDriver: true
          }).start();
        }}
      >
        <Image
          source={require("../assets/images/info2.png")}
          style={styles.info}
          resizeMode="contain"
        />
        <Animated.View style={transformStyle}>
          <Image source={require("../assets/images/iPhoneTimeTreeInfo.png")} />
        </Animated.View>
      </TouchableWithoutFeedBack>
    );
  }
}

export default Info;

Answer 1

opacity в Animated.timing должно быть this.state.opacity

import React, { Component } from "react";
import {
  Image,
  Animated,
  Easing,
  StyleSheet,
  TouchableWithoutFeedBack
} from "react-native";

const styles = StyleSheet.create({
  info: {
    // for info button
    height: 50,
    width: 50,
    flex: 1,
    position: "absolute",
    left: 315,
    bottom: -675
  }
});

class Info extends Component<Props> {
  state = { opacity: new Animated.Value(0) };
  infoScale = this.state.opacity.interpolate({      
      inputRange: [0, 1],
      outputRange: [0.85, 1],
  });
  transformStyle = {
    ...styles.image,
    transform: [{ opacity: infoScale }]
  };
  render() {
    return (
      <TouchableWithoutFeedBack
        onPressIn={() => {
          scaleValue.setValue(0);
          Animated.timing(this.state.opacity, {
            toValue: 1,
            duration: 250,
            easing: Easing.linear,
            useNativeDriver: true
          }).start();
        }}
        onPressOut={() => {
          Animated.timing(this.state.opacity, {
            toValue: 0,
            duration: 100,
            easing: Easing.linear,
            useNativeDriver: true
          }).start();
        }}
      >
        <Image
          source={require("../assets/images/info2.png")}
          style={styles.info}
          resizeMode="contain"
        />
        <Animated.View style={transformStyle}>
          <Image source={require("../assets/images/iPhoneTimeTreeInfo.png")} />
        </Animated.View>
      </TouchableWithoutFeedBack>
    );
  }
}

export default Info;