React-Native 复选框样式

Question

我将 react-native 中的 CheckBox 用于 react-native 项目。

我想将样式更改为下图。 但是没有具体的方法可以改变 在复选框内标记。

我不是实施这种风格的专业 UI 开发人员。 我尝试了不同的解决方案来解决此样式问题，但仍然无法解决。 请帮助我找到解决方案。 提前致谢。

预期的复选框用户界面：

具有我的样式的可用 UI：

代码和Styles如下。

    import { CheckBox } from 'react-native';

    <CheckBox
     value={isItemSelected}
     onValueChange={() => [setItemSelection(!isItemSelected), 
 categorySelectHandler(item.category_name, !isItemSelected)]}
     style={styles.checkbox}
     onFillColor={"#C4C4C4"}
     color={'#FF8300'} />
    
    checkbox: {
     alignSelf: "center",
     borderRadius: 10,
     borderColor: '#C4C4C4',
    },

Answer 1

使用@react-native-community/checkbox进行定制。

import CheckBox from '@react-native-community/checkbox';
          <CheckBox
            // disabled={disabled}
            offAnimationType="stroke"
            // onChange={() => setIsOpen(!isOpen)}
            onFillColor={'blue'}
            onCheckColor={'white'}
            // value={checked}
            boxType="square"
            style={styles.checkbox}
           />

您可以创建一个以相同方式工作的自定义复选框组件，而不是使用 react-native-checkbox。 您只需要为此使用已选中的图像和未选中的图像并将其包装在 Pressable 中。 例如：

const [checked,setChecked] = useState(false);
<Pressable onPress={()=>setChecked(!checked)}>
   <Image source={checked?checkedImage:unCheckedImage} />
</Pressable>

其中选中和未选中的图像是您要导入的图像。

Answer 2

试试这个库 npm i react-native-check-box，