在react-native

Question

我正在尝试在react native中构建一个应用程序，并在该功能中始终出现标题为Cannot find variable: opacity的错误，该功能应淡入图像，然后根据用户按下按钮淡出图像。

我尝试了多种操作，例如使用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;