react native:有办法修复我的例子中的复选框吗

Question

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;

Answer 1

1. 如果您希望复选框文本垂直对齐，那么您可以删除所有的checkboxContainer视图，但如果您希望保留当前布局，则需要所有的checkbox Container视图。

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;