答案 0 :(得分:35)
使用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
}
});
答案 1 :(得分:8)
使用道具:
underlayColor
<TouchableHighlight style={styles.btn} underlayColor={'gray'} />
https://facebook.github.io/react-native/docs/touchablehighlight.html
答案 2 :(得分:2)
使用类似的东西:
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代替样式属性:
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并不重要。继续关注&#34; handlerButtonOnClick&#34;方法。
当状态改变时,组件被重新渲染(&#34;渲染&#34;再次调用方法)。
祝你好运;)答案 3 :(得分:1)
这是 Besart Hoxhaj 在ES6中的答案。当我回答这个问题时,React Native是0.34。
import React from "react";
import { TouchableHighlight, Text, Alert, StyleSheet } from "react-native";
export default class TouchableButton extends React.Component {
constructor(props) {
super(props);
this.state = {
pressed: false
};
}
render() {
return (
<TouchableHighlight
onPress={() => {
// Alert.alert(
// `You clicked this button`,
// 'Hello World!',
// [
// {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
// {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
// {text: 'OK', onPress: () => console.log('OK Pressed')},
// ]
// )
}}
style={[
styles.button,
this.state.pressed ? { backgroundColor: "green" } : {}
]}
onHideUnderlay={() => {
this.setState({ pressed: false });
}}
onShowUnderlay={() => {
this.setState({ pressed: true });
}}
>
<Text>Button</Text>
</TouchableHighlight>
);
}
}
const styles = StyleSheet.create({
button: {
padding: 10,
borderColor: "blue",
borderWidth: 1,
borderRadius: 5
}
});
答案 4 :(得分:0)
React Native现在提供了一个新的Pressable
组件,可以检测新闻互动的各个阶段。
因此,为了更改组件的颜色(通常是任何样式),请参见以下示例:
<Pressable
style={({ pressed }) => [{ backgroundColor: pressed ? 'black' : 'white' }, styles.btn ]}>
{({ pressed }) => (
<Text style={[{ color: pressed ? 'white' : 'black' }, styles.btnText]}>
{text}
</Text>
)}
</Pressable>
代码细目:
style={({ pressed }) => [{ backgroundColor: pressed ? 'black' : 'white' }, styles.btn ]}
样式道具在这里接收反映了是否按下Pressable
的pressed(boolean),并返回样式数组。
{({ pressed }) => (
<Text style={[{ color: pressed ? 'white' : 'black' }, styles.btnText]}>
{text}
</Text>
)}
这里的文本样式也可以修改,因为pressed
组件的子级也可以访问Pressable
。