如何在React Native中创建不受控制的复选框组件？

Question

最大的问题是如何在不使用 useState hook 的情况下通过 DOM 在内部管理和更新这个组件的状态？如何重新渲染？

我在互联网上研究了很多，但我看到最多的是使用像 TextInput 这样已经是原生的、有现成实现的组件，而且没有办法知道这些组件是如何做到这一点的。对于 CheckBox，大多数搜索都会返回受控组件。我只发现它用于纯 React，因为它具有默认情况下不受控制的本机组件。

Answer 1

import React, { useRef } from 'react';
import { View, Text, TouchableWithoutFeedback, StyleSheet } from 'react-native';

const UncontrolledCheckbox = ({ label, onChange }) => {
  const isCheckedRef = useRef(false);

  const toggleCheckbox = () => {
    isCheckedRef.current = !isCheckedRef.current;
    onChange?.(isCheckedRef.current); // Notify parent if needed
    forceUpdateUI(); // Trigger UI re-render
  };

  const [visualState, setVisualState] = React.useState(false); // Only for UI re-render
  const forceUpdateUI = () => setVisualState((prev) => !prev);

  return (
    <TouchableWithoutFeedback onPress={toggleCheckbox}>
      <View style={styles.container}>
        <View
          style={[
            styles.checkbox,
            isCheckedRef.current && styles.checkboxChecked,
          ]}
        />
        <Text style={styles.label}>{label}</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 5,
  },
  checkbox: {
    width: 20,
    height: 20,
    borderWidth: 2,
    borderColor: '#000',
    marginRight: 10,
  },
  checkboxChecked: {
    backgroundColor: '#007BFF',
  },
  label: {
    fontSize: 16,
  },
});

export default UncontrolledCheckbox;