在React Native中按下更改按钮样式 [英] Change button style on press in React Native
本文介绍了在React Native中按下更改按钮样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望我的应用中按钮的样式在按下时更改。最好的方法是什么?
I'd like the style of a button in my app to change when it is being pressed. What is the best way to do this?
推荐答案
使用 TouchableHighlight
。
这里有一个例子:
'use strict';
import React, {
Component,
StyleSheet,
PropTypes,
View,
Text,
TouchableHighlight
} from "react-native";
export default class Home extends Component {
constructor(props) {
super(props);
this.state = { pressStatus: false };
}
_onHideUnderlay() {
this.setState({ pressStatus: false });
}
_onShowUnderlay() {
this.setState({ pressStatus: true });
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
activeOpacity={1}
style={
this.state.pressStatus
? styles.buttonPress
: styles.button
}
onHideUnderlay={this._onHideUnderlay.bind(this)}
onShowUnderlay={this._onShowUnderlay.bind(this)}
>
<Text
style={
this.state.pressStatus
? styles.welcomePress
: styles.welcome
}
>
{this.props.text}
</Text>
</TouchableHighlight>
</View>
);
}
}
Home.propTypes = {
text: PropTypes.string.isRequired
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10,
color: "#000066"
},
welcomePress: {
fontSize: 20,
textAlign: "center",
margin: 10,
color: "#ffffff"
},
button: {
borderColor: "#000066",
borderWidth: 1,
borderRadius: 10
},
buttonPress: {
borderColor: "#000066",
backgroundColor: "#000066",
borderWidth: 1,
borderRadius: 10
}
});
这篇关于在React Native中按下更改按钮样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文