通过在 React Native 上使用 onPress 来更改按钮颜色

Question

我想让按钮在按下时改变其颜色。我尝试查看其他类似主题，但找不到解决方案。代码呈现，初始按钮颜色为红色，但当我按下它时，没有任何反应。

export default class someProgram extends Component {
  render() {
  var buttonColor = "red";
  function changeButtonColor(){
    if(this.buttonColor === "red"){
      this.buttonColor = "green";
    }
    else{
      this.buttonColor = "red";
    }
  }
  return (
    <View style={styles.container}>      
      <Button 
      title="Press me!"
      color={buttonColor}
      onPress={() => {changeButtonColor(buttonColor)}}  
      />
    </View>
  );
 }
}

Answer 1

您应该跟踪组件状态中的颜色。另一方面，请确保了解关键字的真正含义。做一个console.log(this)，亲眼看看。

无论如何，你可以

(1(在构造函数中设置初始状态;

(2( 使用this.state.someProp从状态访问值

然后 (3( 稍后使用 this.setState({ someProp: someValue }) 调整状态。

1( 初始状态

constructor(props) {
  super(props);
  this.state = {
    buttonColor: 'red'; // default button color goes here
  };
}

2(访问状态和3( 设置新状态

onButtonPress = () => {
  this.setState({ buttonColor: 'someNewColor' }); 
}
render() {
  // ...
  return (
    {/* ... */}
    <Button
      color={this.state.buttonColor}
      onPress={onButtonPress}
    />
  )

请注意，省略了代码的某些部分，以专注于手头的问题。