Reactjs 在react native中第二次单击onPress后状态更改

我为我的应用程序制作了一个自定义复选框

constructor(props) {
    super(props);
    this.state = {
      checkValue1: false,
      color1: 'white',
    };
  }

checkBox1 = () => {
        if (this.state.checkValue1 == false) {
          this.setState({
            color1: 'white',
            checkValue1: true,
          });
        } else if (this.state.checkValue1 == true) {
          this.setState({
            color1: '#70AD47',
            checkValue1: false,
          });
        }
      };

  <TouchableOpacity style={styles.checkBorder} onPress={this.checkBox1}>
    <Icon name="checkmark" type="ionicon" size={20} color={this.state.color1} />
  </TouchableOpacity>


checkBorder: {
    backgroundColor: "blue",
    width: 20,
    height: 20,
    borderColor: '#7F7F7F',
    borderWidth: 1.5,
    borderRadius: 3,
  },

构造函数（道具）{
超级（道具）；
此.state={
checkValue1:false，
颜色1:'白色'，
};
}
复选框1=（）=>{
if（this.state.checkValue1==false）{
这是我的国家({
颜色1:'白色'，
checkValue1:true，
});
}else if（this.state.checkValue1==true）{
这是我的国家({
颜色1:“#70AD47”，
checkValue1:false，
});
}
};
检查边界：{
背景颜色：“蓝色”，
宽度：20，
身高：20，
边框颜色：“#7F7F7F”，
边框宽度：1.5，
边界半径：3，
},

一切正常。但唯一的问题是，图标颜色在第二次点击后会发生变化。之后，它会随着每次单击而改变。问题只是它应该在第一次点击后改变颜色。我不知道我的代码遗漏了什么

checkBox1 = () => {
  if (this.state.checkValue1 == false) {
    this.setState({
      color1: "#70AD47", // change here
      checkValue1: true,
    });
  } else if (this.state.checkValue1 == true) {
    this.setState({
      color1: "white",  // change here
      checkValue1: false,
    });
  }
};

这样试试

checkBox1 = () => {
  if (this.state.checkValue1 == false) {
    this.setState({
      color1: "#70AD47", // change here
      checkValue1: true,
    });
  } else if (this.state.checkValue1 == true) {
    this.setState({
      color1: "white",  // change here
      checkValue1: false,
    });
  }
};

---

谢谢你。那对我来说是个愚蠢的错误part@pratteekshaurya请接受回答谢谢：-）谢谢你。那对我来说是个愚蠢的错误part@pratteekshaurya请接受回答，谢谢：-）