按下按钮时如何更改主题? (本机反应)
How do I change the theme when I press the button? (React-native)
当我按下按钮时,我希望它获得 button2 主题而不是 buttondefault。我该怎么做?
(我在react-native文档里找不到,有没有link?)
export default class deneme extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<TouchableOpacity
onPress={() => this.pressme()}
style={styles.buttondefault}>
<Text style={{fontSize:40}}> B </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
buttondefault:{
width:100,
height:50,
backgroundColor:'green'
},
button2:{
width:50,
height:100,
backgroundColor:'green'
},
});
您可以为该按钮设置一个状态,单击该按钮将更改状态,进而更改样式,如下所示:
constructor(props) {
super(props);
this.state = {
buttonStyle: 'default'
};
}
...
...
<TouchableOpacity
onPress={() => this.pressme()}
style={(this.state.buttonStyle == 'default') ? styles.buttondefault : styles.button2}>
<Text style={{fontSize:40}}> B </Text>
</TouchableOpacity>
...
...
pressme() {
this.setState({buttonStyle: 'button2'});
}
当我按下按钮时,我希望它获得 button2 主题而不是 buttondefault。我该怎么做? (我在react-native文档里找不到,有没有link?)
export default class deneme extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<TouchableOpacity
onPress={() => this.pressme()}
style={styles.buttondefault}>
<Text style={{fontSize:40}}> B </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
buttondefault:{
width:100,
height:50,
backgroundColor:'green'
},
button2:{
width:50,
height:100,
backgroundColor:'green'
},
});
您可以为该按钮设置一个状态,单击该按钮将更改状态,进而更改样式,如下所示:
constructor(props) {
super(props);
this.state = {
buttonStyle: 'default'
};
}
...
...
<TouchableOpacity
onPress={() => this.pressme()}
style={(this.state.buttonStyle == 'default') ? styles.buttondefault : styles.button2}>
<Text style={{fontSize:40}}> B </Text>
</TouchableOpacity>
...
...
pressme() {
this.setState({buttonStyle: 'button2'});
}