React Native中如何实现Expo Checkbox的互斥选中功能？

原代码存在的问题 #

• 状态初始化使用了字符串"false"，但Expo Checkbox的value属性要求接收布尔值（true/false），字符串会被判定为真值，导致初始状态异常。
• 用两个独立状态变量管理复选框选中状态，无法直接实现互斥逻辑，且错误使用onPress触发状态更新，造成状态混乱。

正确实现思路 #

使用单个状态变量记录当前选中的复选框标识（比如'box1'/'box2'/null），通过该状态统一控制两个复选框的选中状态，实现点击其中一个时自动取消另一个的选中效果。

修改后的代码 #

import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import Checkbox from "expo-checkbox";

function ForChecked() {
  // 单个状态记录选中的复选框，初始为null表示都未选中
  const [selectedCheckbox, setSelectedCheckbox] = useState(null);

  // 处理第一个复选框的选中切换
  const handleBox1Toggle = () => {
    setSelectedCheckbox(prev => prev === 'box1' ? null : 'box1');
  };

  // 处理第二个复选框的选中切换
  const handleBox2Toggle = () => {
    setSelectedCheckbox(prev => prev === 'box2' ? null : 'box2');
  };

  return (
    <View style={styles.container}>
      <Checkbox 
        value={selectedCheckbox === 'box1'} 
        onValueChange={handleBox1Toggle} 
      />
      <Checkbox 
        value={selectedCheckbox === 'box2'} 
        onValueChange={handleBox2Toggle} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 20, // 添加间距让复选框更易区分
  },
});

export default ForChecked;

代码说明 #

• 每个复选框的value通过对比selectedCheckbox的值来判断是否选中，确保同一时间只有一个复选框处于选中状态。
• 点击复选框时，通过onValueChange触发的处理函数切换状态：如果当前复选框已选中，点击则取消（设为null）；如果未选中，则将状态设为当前复选框的标识，自动取消另一个的选中状态。
• 移除了原代码中错误的onPress属性，Expo Checkbox的状态切换仅需通过onValueChange处理。

内容的提问来源于stack exchange，提问作者sahasrabhuja neuron