我试图弄清楚如何更改React Native的TouchableOpacity组件的不透明度的体积,这意味着我不喜欢在执行按压时的默认不透明度值,我希望不透明度降低.
根据documentation,为此应使用Animated API:
不透明度通过将子对象包装在动画中来控制.视图,该视图已添加到视图层次 struct 中.请注意,这可能会影响布局.
所以,我做到了,看起来就是这样:
<Animated.View style={{ opacity: this.state.opacity._value }}>
<TouchableOpacity
onPress={this.hideKeyboard.bind(this)}
style={{ opacity: this.state.opacity._value }}
>
<Text style={buttonTextStyle}>Cancel</Text>
</TouchableOpacity>
</Animated.View>
onPress调用的hideKeyboard方法从内部调用changeOpacity方法,看起来是这样的:
changeOpacity() {
Animated.timing(
this.state.opacity,
{
toValue: this.state.opacity === 1 ? 0 : 1,
duration: 500
}
).start();
}
this.state.opacity在构造函数中声明:
constructor(props) {
super(props);
this.state = { opacity: new Animated.Value(1) };
}
有了所有这些,行为(TouchableOpacity的不透明度onPress的体积)不会改变,它仍然是默认值.该文档还模糊地介绍了setOpacityTo方法,但由于文档中提供的详细描述,我不知道如何使用它.如何手动配置不透明度?