Edu*_*ard 3 javascript button reactjs react-native touchableopacity
我试图找出如何更改React-Native的TouchableOpacity组件的不透明度的体积,这意味着我不喜欢执行印刷时的不透明度的默认值,并且我希望不透明度不那么透明.
根据用于此目的的文档,应使用Animated API:
通过将子项包装在Animated.View中来控制不透明度,Animated.View将添加到视图层次结构中.请注意,这可能会影响布局.
所以,我做到了,这就是它的样子:
<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>
Run Code Online (Sandbox Code Playgroud)
该hideKeyboard方法,正在被调用onPress,调用changeOpacity从内它的方法,这是它的外观:
changeOpacity() {
Animated.timing(
this.state.opacity,
{
toValue: this.state.opacity === 1 ? 0 : 1,
duration: 500
}
).start();
}
Run Code Online (Sandbox Code Playgroud)
this.state.opacity在构造函数中声明:
constructor(props) {
super(props);
this.state = { opacity: new Animated.Value(1) };
}
Run Code Online (Sandbox Code Playgroud)
拥有所有这些,行为(不透明度onPress of TouchableOpacity的音量)不会改变,它仍然保持默认.该文档还模糊地介绍了setOpacityTo方法,但由于文档中提供的描述的全面性,我无法弄清楚如何使用它.如何执行不透明度的手动配置?
Rav*_*Raj 12
你试过这个吗?
<TouchableOpacity
activeOpacity={.7} // default is .2
... other props here
/>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
5038 次 |
| 最近记录: |