React Native虚拟键盘导致Checkbox勾选无值注册的修复方案咨询

我有一个SearchField组件，用户可在其中搜索任务，或通过Checkbox勾选预定义任务。当聚焦SearchField时会弹出虚拟键盘，点击其他区域则关闭键盘。问题在于，当用户点击Checkbox时，键盘会关闭，此时Checkbox视觉上已勾选，但实际值并未被注册。例如选择两个任务时，仅最后一个会被记录，不过两个Checkbox都显示为勾选状态。

补充说明：当键盘处于开启状态时，点击Checkbox并不会触发ListItem组件的onPress方法。

现有代码 #

SearchField 使用代码 #

<SearchField
   onConfirm={(items) => setFieldValue('task_blueprint_ids', items)}
   placeholder="Zoeken"
   selectedValues={values.task_blueprint_ids}
   items={taskBlueprintOptions}
   value={values.task_blueprint_ids}
   containerStyle={{ flex: 1, padding: 5, marginTop: 5 }}
   error={errors && errors.task_blueprint_ids}
/>

ListItem 组件代码 #

interface Props<T> {
    value: boolean;
    onPress: (item: { label: string; value: T }) => void;
    item: { label: string; value: T };
}

export const ListItem = <T extends number | string>({ value, onPress, item }: Props<T>) => {
    const [keyboardVisible, setKeyboardVisible] = useState(true);

    useEffect(() => {
        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
            setKeyboardVisible(true);
        });
        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
            setKeyboardVisible(false);
        });

        return () => {
            keyboardDidShowListener.remove();
            keyboardDidHideListener.remove();
        };
    }, []);

    return (
        <TouchableOpacity onPress={() => onPress(item)} style={{ zIndex: 1 }}>
            <View style={styles.listItem}>
                <CheckBox
                    value={value}
                    boxType="square"
                    style={
                        Platform.OS === 'ios' && {
                            width: 15,
                            height: 15,
                            marginRight: 5,
                        }
                    }
                    onAnimationType="bounce"
                    offAnimationType="bounce"
                    tintColor={Colors.main}
                    onTintColor={Colors.main}
                    onCheckColor="#fff"
                    onFillColor={Colors.main}
                    tintColors={{ true: Colors.main, false: Colors.main }}
                    lineWidth={1}
                />
                <Text style={{ fontSize: 16 }}>{item.label}</Text>
            </View>
        </TouchableOpacity>
    );
};

export default ListItem;

核心问题是点击Checkbox时触发了键盘收起逻辑，导致onPress事件被中断，状态更新未执行。以下是几种可行的修复方向：

1. 优先响应ListItem的触摸事件 #

通过onStartShouldSetResponder让ListItem优先捕获触摸事件，先执行状态更新再手动关闭键盘，确保逻辑不被中断。修改后的ListItem组件如下：

export const ListItem = <T extends number | string>({ value, onPress, item }: Props<T>) => {
    const [keyboardVisible, setKeyboardVisible] = useState(true);

    useEffect(() => {
        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
            setKeyboardVisible(true);
        });
        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
            setKeyboardVisible(false);
        });

        return () => {
            keyboardDidShowListener.remove();
            keyboardDidHideListener.remove();
        };
    }, []);

    const handlePress = () => {
        // 先执行状态更新逻辑
        onPress(item);
        // 再手动关闭键盘（保持原有交互体验）
        if (keyboardVisible) {
            Keyboard.dismiss();
        }
    };

    return (
        <TouchableOpacity 
            onPress={handlePress} 
            style={{ zIndex: 1 }}
            onStartShouldSetResponder={() => true}
        >
            <View style={styles.listItem}>
                <CheckBox
                    value={value}
                    boxType="square"
                    style={
                        Platform.OS === 'ios' && {
                            width: 15,
                            height: 15,
                            marginRight: 5,
                        }
                    }
                    onAnimationType="bounce"
                    offAnimationType="bounce"
                    tintColor={Colors.main}
                    onTintColor={Colors.main}
                    onCheckColor="#fff"
                    onFillColor={Colors.main}
                    tintColors={{ true: Colors.main, false: Colors.main }}
                    lineWidth={1}
                />
                <Text style={{ fontSize: 16 }}>{item.label}</Text>
            </View>
        </TouchableOpacity>
    );
};

2. 让Checkbox直接响应点击事件 #

绕过外层TouchableOpacity，给CheckBox组件直接绑定点击事件，确保状态更新逻辑优先执行：

// 修改ListItem中的CheckBox部分
<CheckBox
    value={value}
    boxType="square"
    style={
        Platform.OS === 'ios' && {
            width: 15,
            height: 15,
            marginRight: 5,
        }
    }
    onAnimationType="bounce"
    offAnimationType="bounce"
    tintColor={Colors.main}
    onTintColor={Colors.main}
    onCheckColor="#fff"
    onFillColor={Colors.main}
    tintColors={{ true: Colors.main, false: Colors.main }}
    lineWidth={1}
    onPress={handlePress} // 直接绑定点击事件
/>

3. 优化SearchField的键盘收起逻辑 #

如果SearchField用了TouchableWithoutFeedback实现点击外部关闭键盘，需要排除ListItem区域。可以给遮罩层添加pointerEvents="box-none"，或者检测触摸目标是否为ListItem，若是则延迟关闭键盘。

推荐方案1，仅修改ListItem组件即可解决问题，无需改动多处使用的SearchField。通过优先响应触摸事件，既保证了状态更新的正确性，又保留了点击Checkbox后收起键盘的交互体验，符合用户预期。

内容的提问来源于stack exchange，提问作者Jesse Schoonveld