在 React Native 中更改 TouchableOpacity 的颜色
Change color of TouchableOpacity in React Native
谁能帮帮我。
这是我的源代码:https://snack.expo.io/rJFgyPDpH
想法是,如果我点击“1 Button”,它应该是 'red',如果我点击 “2 Button”。 =22=] 也应将其颜色更改为 'red',但 "1 Button" 应更改为其默认颜色,即黑色。但是,“2 个按钮”。
如果我的方法太简单,也欢迎使用其他方法(如TouchableHighlight
、ES6等)。如果您指出错误以便我从中吸取教训,我将不胜感激。
您可以像这样编写代码:
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',
},
});
现在如果您点击第一个按钮,它应该是 'red',但第二个按钮仍然是 'black' 背景。因此,如果您点击第二个按钮,它应该是 'red',而第一个按钮应该是 'black'.
试试下面
state={
selectedButton: '',
};
<View style={styles.container}>
<TouchableOpacity
style={{ backgroundColor: this.state.selectedButton === 'button1' ? 'red' : 'black', padding: 15}}
onPress={() => this.setState({ selectedButton: 'button1' })}
>
<Text style={styles.text}>1 Button</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ backgroundColor: this.state.selectedButton === 'button2' ? 'red' : 'black', padding: 15}}
onPress={() => this.setState({ selectedButton: 'button2' })}
>
<Text style={styles.text}>2 button!</Text>
</TouchableOpacity>
</View>
changeColor=()=>{
this.setState({
backgroundColor:'red',
backgroundColor2:'black'
})
}
changeColor2=()=>{
this.setState({
backgroundColor:'black',
backgroundColor2:'red'
})
}
根据您的要求,第一个按钮上的 onPress 将调用 changeColor。在按下第二个按钮时,它会调用 changeColor2。
代码中,第二个按钮的onPress,可以改为changeColor2,而不是changeColor函数。
这个
onPress={()=>this.changeColor2()}
而不是
onPress={()=>this.changeColor()}
通过传递 id 你可以选择改变颜色
import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, Text, View, Button } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = { colorId:0 };
}
onPress = (id) => {
this.setState({colorId: id});
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={this.state.colorId === 1? styles.red : styles.button}
onPress={()=>this.onPress(1)}>
<Text>Button1</Text>
</TouchableOpacity>
<TouchableOpacity
style={this.state.colorId === 2? styles.red : styles.button}
onPress={()=>this.onPress(2)}>
<Text>Button2</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10,
},
red: {
backgroundColor: 'red',
alignItems: 'center',
padding: 10,
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
},
});
谁能帮帮我。 这是我的源代码:https://snack.expo.io/rJFgyPDpH
想法是,如果我点击“1 Button”,它应该是 'red',如果我点击 “2 Button”。 =22=] 也应将其颜色更改为 'red',但 "1 Button" 应更改为其默认颜色,即黑色。但是,“2 个按钮”。
如果我的方法太简单,也欢迎使用其他方法(如TouchableHighlight
、ES6等)。如果您指出错误以便我从中吸取教训,我将不胜感激。
您可以像这样编写代码:
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',
},
});
现在如果您点击第一个按钮,它应该是 'red',但第二个按钮仍然是 'black' 背景。因此,如果您点击第二个按钮,它应该是 'red',而第一个按钮应该是 'black'.
试试下面
state={
selectedButton: '',
};
<View style={styles.container}>
<TouchableOpacity
style={{ backgroundColor: this.state.selectedButton === 'button1' ? 'red' : 'black', padding: 15}}
onPress={() => this.setState({ selectedButton: 'button1' })}
>
<Text style={styles.text}>1 Button</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ backgroundColor: this.state.selectedButton === 'button2' ? 'red' : 'black', padding: 15}}
onPress={() => this.setState({ selectedButton: 'button2' })}
>
<Text style={styles.text}>2 button!</Text>
</TouchableOpacity>
</View>
changeColor=()=>{
this.setState({
backgroundColor:'red',
backgroundColor2:'black'
})
}
changeColor2=()=>{
this.setState({
backgroundColor:'black',
backgroundColor2:'red'
})
}
根据您的要求,第一个按钮上的 onPress 将调用 changeColor。在按下第二个按钮时,它会调用 changeColor2。
代码中,第二个按钮的onPress,可以改为changeColor2,而不是changeColor函数。
这个
onPress={()=>this.changeColor2()}
而不是
onPress={()=>this.changeColor()}
通过传递 id 你可以选择改变颜色
import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, Text, View, Button } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = { colorId:0 };
}
onPress = (id) => {
this.setState({colorId: id});
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={this.state.colorId === 1? styles.red : styles.button}
onPress={()=>this.onPress(1)}>
<Text>Button1</Text>
</TouchableOpacity>
<TouchableOpacity
style={this.state.colorId === 2? styles.red : styles.button}
onPress={()=>this.onPress(2)}>
<Text>Button2</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10,
},
red: {
backgroundColor: 'red',
alignItems: 'center',
padding: 10,
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
},
});