react native：如何制作文本标签，在按下复选框时会选中它？

Question

如何制作文本“BIRD”标签以在按下复选框时选中它？ 根据我的示例，它不起作用，我也不清楚。

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

function App(props) {
  const isSelected = useSelector((rootState) => rootState.BitzuaDigumReducer.checkBox);

  return (
    <TouchableOpacity
      activeOpacity={1}
      style={{
        flexDirection: 'row',
        alignSelf: 'flex-start',
        top: 20,
        left: 10,
      }}
    >
      <CheckBox
        value={isSelected}
        onValueChange={(value) => dispatch(setCheckBox(value))}
        style={styles.checkbox}
        tintColors={{ true: 'white', false: 'white' }}
      />
      <Text style={styles.label}>BIRD</Text>
    </TouchableOpacity>
  );
}

Answer 1

我在此示例中模拟了 Checkbox，但请查看它。它应该让您了解如何通过按标签来切换复选框值：https://snack.expo.io/@zvona/toggle-checkbox-on-label

核心代码：

const App = () => {
  const [isSelected, setSelected] = useState(false);

  const toggleCheckbox = () => {
    setSelected(!isSelected);
    // Here you can dispatch the event to state management
  };

  return (
    <View style={styles.container}>
      <Checkbox onValueChange={toggleCheckbox} selected={isSelected} />
      <TouchableOpacity activeOpacity={0.8} onPress={toggleCheckbox}>
        <Text style={styles.label}>{'Label'}</Text>
      </TouchableOpacity>
    </View>
  );
};