Почему флажок не работает в React Native?

Question

import CheckBox from '@react-native-community/checkbox';

export default class All extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isSelected: true,
    };
  }

  checkBoxChanged() {
    alert('changed');
    this.setState({isSelected : !this.state.isSelected})
  }

  render() {
    const { items } = this.state;

    return (
        <Content>
          <View>
            {items.map((item) => (
              <View>
                <Text>{item.name}</Text>
                  <CheckBox
                    value={this.state.isSelected}
                    onValueChange={() => this.checkBoxChanged()}
                  />
              </View>
            ))}
          </View>
        </Content>
    );
  }
}

Это не работает. Я имею в виду, ничего не происходит. Когда я включаю, ничего не меняется и не доходит до checkBoxChanged ().

Я застрял в этой проблеме. Буду признателен, если вы поможете мне :)

Answer 1

Флажок устарел из реактивного нативного элемента, но его можно использовать из собственного нативного компонента.

для их использования. Установить: npm установить @ реагировать-нативное сообщество / флажок - сохранить

Использование:

import CheckBox from '@react-native-community/checkbox';

Внутри вы используете этот элемент

<CheckBox  value={this.state.check}
                            onChange={()=>this.checkBoxText()} />

И внутри ваш класс

constructor(props) {
        super(props);
        this.state = {
        check: false
        };

Объявите функцию за пределами области конструктора. create:

checkBoxText() {
        this.setState({
            check:!this.state.check
        })
       alert("Value Changed to " + this.state.check)
    } 

Это создаст ваш активируемый флажок в вашем приложении.

Answer 2

Вы можете использовать onValueChange={() => checkBoxChanged()}

  <CheckBox
      value={this.state.isSelected}
      onValueChange={() => checkBoxChanged()} 
    />

А в функции checkBoxChanged вы можете установить состояние для изменения значения isSelected

checkBoxChanged(){ 
this.setState({isSelected : !this.state.isSelected})
}

Более того флажок устарел, вам нужно установить

 @react-native-community/checkbox

проверить эту ссылку, чтобы узнать больше.

Надеюсь, это поможет

Answer 3

Я хотел бы сказать, что вы не используете флажок отact-native, но он устарел, но если вы используете его, пожалуйста, посмотрите код ниже, там нет onChange Prop, используйте onValueChange вместо onChange и поддерживайте состояние и передайте значение prop в компонент-флажок.

https://reactnative.dev/docs/checkbox#__docusaurus

import React, { useState } from "react";
import { CheckBox, Text, StyleSheet, View } from "react-native";

export default App = () => {
  const [isSelected, setSelection] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.checkboxContainer}>
        <CheckBox
          value={isSelected}
          onValueChange={setSelection}
          style={styles.checkbox}
        />
        <Text style={styles.label}>Do you like React Native?</Text>
      </View>
      <Text>Is CheckBox selected: {isSelected ? "?" : "?"}</Text>
    </View>
  );
};

Answer 4

Код должен быть

import { CheckBox } from 'react-native';

checkBoxChanged() {
  alert('changed');
}

<CheckBox onValueChange={()=>this.checkBoxChanged()} />

Вы вызываете функцию напрямую, а не вызываете ее по щелчку. Этот флажок работает только в Android, поэтому лучше использовать тот, который установлен на реагирующих элементах https://react-native-elements.github.io/react-native-elements/docs/checkbox.html

Answer 5

import { CheckBox } from 'react-native';

isChecked = false
checkBoxChanged() {
    alert('changed');
}

getCheckedStatus(){
    this.isChecked != this.isChecked;
    return this.isChecked;
}

<CheckBox
    activeOpacity={1}
    textStyle={{ color: colors.colorGray, fontSize: dimen.fontSize.textAppearanceBody1_16 }}
    containerStyle={styles.checkBoxContainer}
    checkedColor={colors.profileTabSelectedColor}
    uncheckedColor={colors.profileTabSelectedColor}
    title={'Gender'}
    checked={this.getCheckedStatus()}
    onPress={() => { this.checkBoxChanged() }}
/>