我希望我的应用程序中的按钮样式在按下时可以更改。做这个的最好方式是什么?
使用TouchableHighlight。
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 } });