Блог

Я установил пользовательский флажок для своего приложения.

 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,
  },
 

Все работает нормально. Но единственная проблема в том, что цвет значка меняется после второго щелчка. После этого оно меняется при каждом нажатии. Проблема только в том, что он должен изменить цвет после первого щелчка. Я не знаю, чего мне не хватает в моем коде

Попробуйте этот способ

 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,
    });
  }
};