javascript - 在react-native中找不到变量

Question

我正在尝试在 native react 中构建一个应用程序，但在一个功能中不断出现标题为无法找到变量:不透明度的错误，该功能应该根据用户淡入图像，然后淡出图像按下按钮。

我尝试了多种方法，例如使用 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

Animated.timing 中的

opacity 应为 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;