在React Native中按下时更改按钮样式
在React Native中按下时更改按钮样式
提问于 2016-01-06 12:50:09
我希望我的应用程序中的按钮在被按下时更改其样式。做这件事最好的方法是什么？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-01-07 00:15:16
使用TouchableHighlight。
下面是一个示例：
import React from 'react';
import { TouchableHighlight, View, Text, StyleSheet } from 'react-native';
export default function Button() {
var [ isPress, setIsPress ] = React.useState(false);
var touchProps = {
activeOpacity: 1,
underlayColor: 'blue', // <-- "backgroundColor" will be always overwritten by "underlayColor"
style: isPress ? styles.btnPress : styles.btnNormal, // <-- but you can still apply other style changes
onHideUnderlay: () => setIsPress(false),
onShowUnderlay: () => setIsPress(true),
onPress: () => console.log('HELLO'), // <-- "onPress" is apparently required
};
return (
<View style={styles.container}>
<TouchableHighlight {...touchProps}>
<Text>Click here</Text>
</TouchableHighlight>
</View>
);
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
btnNormal: {
borderColor: 'blue',
borderWidth: 1,
borderRadius: 10,
height: 30,
width: 100,
},
btnPress: {
borderColor: 'blue',
borderWidth: 1,
height: 30,
width: 100,
}
});Stack Overflow用户
发布于 2017-05-11 07:10:07
使用道具：
underlayColor
<TouchableHighlight style={styles.btn} underlayColor={'gray'} />https://facebook.github.io/react-native/docs/touchablehighlight.html
Stack Overflow用户
发布于 2016-01-06 15:57:25
使用类似这样的东西：
class A extends React.Component {
constructor(props){
super(props);
this.state = {
onClicked: false
}
this.handlerButtonOnClick = this.handlerButtonOnClick.bind(this);
}
handlerButtonOnClick(){
this.setState({
onClicked: true
});
}
render() {
var _style;
if (this.state.onClicked){ // clicked button style
_style = {
color: "red"
}
}
else{ // default button style
_style = {
color: "blue"
}
}
return (
<div>
<button
onClick={this.handlerButtonOnClick}
style={_style}>Press me !</button>
</div>
);
}
}如果使用外部CSS，则可以使用className代替style属性：
render() {
var _class = "button";
var _class.concat(this.state.onClicked ? "-pressed" : "-normal") ;
return (
<div>
<button
onClick={this.handlerButtonOnClick}
className={_class}>Press me !</button>
</div>
);
}你如何应用你的CSS其实并不重要。注意"handlerButtonOnClick“方法。
当状态改变时，组件被重新呈现("render“方法被再次调用)。
祝你好运;)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34625829
复制相关文章
相似问题