react native：在我的示例中有方法可以修复复选框吗？

如何解决react native：在我的示例中有方法可以修复复选框吗？

1. 如何将所有复选框置于一个视图下？
2. 我如何才能选择全部，何时按下它会选中所有其余复选框，何时再次按下它会删除我所有的复选框？

import React,{ useState } from "react";
import { Text,StyleSheet,View } from "react-native";
import CheckBox from '@react-native-community/checkbox';

const App = () => {
  const [isSelected1,setSelection1] = useState(false);
  const [isSelected2,setSelection2] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.checkboxContainer}>
        <CheckBox
          value={isSelected1}
          onValueChange={setSelection1}
          style={styles.checkbox}
        />
        <Text style={styles.label}>CHOOSE ALL</Text>
      </View>
      <View style={styles.checkboxContainer}>
        <CheckBox
          value={isSelected2}
          onValueChange={setSelection2}
          style={styles.checkbox}
        />
        <Text style={styles.label}>THE NAME</Text>      
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,alignItems: "center",justifyContent: "center",},checkboxContainer: {
    flexDirection: "row",// marginBottom: 20,checkbox: {
    alignSelf: "center",label: {
    margin: 8,});

export default App;

解决方法

1. 如果要使复选框文本垂直对齐，则可以删除所有checkboxContainer视图，但是如果要保留当前布局，则将需要所有checkboxContainer视图。

2. 我添加了一个带有帮助功能的复选框，该复选框实现了所有选中/未选中的功能

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

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

const App = () => {
  const [isSelected1,setSelection1] = useState(false);
  const [isSelected2,setSelection2] = useState(false);

  const checkAllHelper = (value) => {
    if (value) {
      setSelection1(true);
      setSelection2(true);
    } else {
      setSelection1(false);
      setSelection2(false);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.checkboxContainer}>
        <CheckBox
          value={isSelected1}
          onValueChange={setSelection1}
          style={styles.checkbox}
        />
        <Text style={styles.label}>CHOOSE ALL</Text>
      </View>
      <View style={styles.checkboxContainer}>
        <CheckBox
          value={isSelected2}
          onValueChange={setSelection2}
          style={styles.checkbox}
        />
        <Text style={styles.label}>THE NAME</Text>
      </View>
      <View style={styles.checkboxContainer}>
        <CheckBox
          value={isSelected1 && isSelected2}
          onValueChange={(newValue) => checkAllHelper(newValue)}
          style={styles.checkbox}
        />
        <Text style={styles.label}>Check All CheckBoxes</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,alignItems: "center",justifyContent: "center",},checkboxContainer: {
    flexDirection: "row",// marginBottom: 20,checkbox: {
    alignSelf: "center",label: {
    margin: 8,});

export default App;