我正在尝试在 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;
最佳答案
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;
关于javascript - 在react-native中找不到变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56567198/