native react 变颜色 点击,在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?

解决方案

Use TouchableHighlight.

Here an example:

'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 (

activeOpacity={1}

style={

this.state.pressStatus

? styles.buttonPress

: styles.button

}

onHideUnderlay={this._onHideUnderlay.bind(this)}

onShowUnderlay={this._onShowUnderlay.bind(this)}

>

style={

this.state.pressStatus

? styles.welcomePress

: styles.welcome

}

>

{this.props.text}

);

}

}

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

}

});