在 React Native 中更改 TouchableOpacity 的颜色
谁能帮帮我.这是我的源代码:https://snack.expo.io/rJFgyPDpH
Can anyone help me. This is my source code: https://snack.expo.io/rJFgyPDpH
想法是,如果我点击1 Button"它应该是红色",如果我点击2 Button"也应该改变它的颜色为红色",但 "1 Button" 应更改为其默认颜色,即黑色.但是,2 按钮".
Idea is that, if I click to "1 Button" it should be 'red' and if I click to "2 Button" is also should change its color to 'red' but the "1 Button" should be changed to its default colour which is black. However, "2 Button".
如果我的方法过于简单,也欢迎使用其他方法(如TouchableHighlight
、ES6 等).如果您向我展示错误以便我从中吸取教训,我将不胜感激.
If my approach is too simple, other methods (such as TouchableHighlight
, ES6 and etc) are also welcomed. I appreciate if you show me mistakes so that I learn from that.
推荐答案
你可以这样写代码:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button,TouchableOpacity} from 'react-native';
export default class App extends Component {
state={
backgroundColor: 'black',
backgroundColor2: 'black',
pressed: false,
};
changeColor(){
if(!this.state.pressed){
this.setState({ pressed: true,backgroundColor: 'red', backgroundColor2: 'black'});
} else {
this.setState({ pressed: false, backgroundColor: 'black' ,backgroundColor2: 'red'});
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={{backgroundColor:this.state.backgroundColor, padding: 15}}
onPress={()=>this.changeColor()}
>
<Text style={styles.text}>1 Button</Text>
</TouchableOpacity>
<TouchableOpacity
style={{backgroundColor:this.state.backgroundColor2, padding: 15}}
onPress={()=>this.changeColor()}
>
<Text style={styles.text}>2 button!</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
text:{
color:'white'
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
});
现在,如果您单击第一个按钮,它应该是红色",但第二个按钮仍然是黑色"背景.因此,如果您点击第二个按钮,它应该是红色",而第一个按钮应该是黑色".
Now If you click to the first button it should be 'red', but second, remains as 'black' background. Consequently, if you click to second button it should be 'red', whereas the first button should be 'black'.
相关文章