如何让Native-Base 3.3.7的Radio按钮兼具Checkbox取消选中功能

核心思路是仅通过Radio.Group的绑定状态控制选中逻辑，不需要维护每个Radio的单独状态，在onChange回调中判断点击的选项是否为当前已选中项，以此决定是选中还是取消选中。

修改后的完整代码 #

1. 组件状态定义（简化冗余状态）

constructor(props) {
  super(props);
  this.state = {
    performanceRadioGroup: '' // 仅保留组状态即可
  };
  this.accademicQuestionsOnPerformance = this.accademicQuestionsOnPerformance.bind(this);
}

2. Radio组渲染代码（无需改动UI部分，仅确保value绑定正确）

<Radio.Group
    name="exampleGroup"
    accessibilityLabel="CONSTANTS.QUESTION_1"
    defaultValue=""
    value={this.state.performanceRadioGroup}
    onChange={this.accademicQuestionsOnPerformance}
>
    <Radio
        _text={{ mx: 2 }}
        my="2"
        colorScheme="purple"
        style={{ borderColor: '#813588' }}
        value="veryGoodRadio"
        icon={
            <Icon
                style={{ color: '#813588' }}
                as={<MaterialCommunityIcons name="circle" />}
            />
        }
    >
        Very Good
    </Radio>

    <Radio
        _text={{ mx: 2 }}
        colorScheme="purple"
        my="2"
        style={{ borderColor: '#813588' }}
        value="goodRadio"
        icon={
            <Icon
                style={{ color: '#813588' }}
                as={<MaterialCommunityIcons name="circle" />}
            />
        }
    >
        Good
    </Radio>

    <Radio
        _text={{ mx: 2 }}
        colorScheme="purple"
        my="2"
        style={{ borderColor: '#813588' }}
        value="needImpRadio"
        icon={
            <Icon
                style={{ color: '#813588' }}
                as={<MaterialCommunityIcons name="circle" />}
            />
        }
    >
        Needs Improvement
    </Radio>
</Radio.Group>

3. 简化后的onChange回调函数

accademicQuestionsOnPerformance = (selectedValue) => {
    // 判断点击的是否为当前已选中项
    if (selectedValue === this.state.performanceRadioGroup) {
        this.setState({ performanceRadioGroup: '' }); // 取消选中
    } else {
        this.setState({ performanceRadioGroup: selectedValue }); // 选中新选项
    }
};

关键修改说明 #

• 移除了冗余的veryGoodRadio/goodRadio/needImpRadio状态，Native-Base的Radio组件会自动根据Radio.Group的value判断自身是否选中，无需单独维护
• 新增了"点击已选中项取消选中"的逻辑，通过对比选中值与当前状态实现
• 去掉了不必要的async/await，因为当前逻辑不需要等待setState完成后执行后续操作

内容的提问来源于stack exchange，提问作者Akshay Kumar