首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在react-native中找不到变量

在react-native中找不到变量
EN

Stack Overflow用户
提问于 2019-06-13 01:03:59
回答 1查看 1.5K关注 0票数 0

我正在尝试在react原生中构建一个应用程序,并且在一个应该淡入和淡出图像的功能中总是出现标题为Cannot find variable: opacity的错误,这取决于用户按下一个按钮。

我尝试过多种方法,比如使用let运算符,并尝试更改代码在类中的位置。

下面是按钮和动画的代码

代码语言:javascript
运行
复制
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;
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-13 01:08:15

Animated.timing中的opacity应为this.state.opacity

代码语言:javascript
运行
复制
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;
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56567198

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档