如何从 NativeBase 更改复选框中勾号的颜色？答案

【问题标题】：How do i change the color of the tick in the checkbox from NativeBase?如何从 NativeBase 更改复选框中勾号的颜色？
【发布时间】：2022-10-25 17:11:36
【问题描述】：

我在 Native Base 上遇到了这个问题，基本上我想在 Checkbox 组件中将勾选的默认颜色从黑色更改为白色。如果有人知道它会真的很感激。这是我的代码和它现在的样子。

import React from 'react';

import { Checkbox } from 'native-base';

function CheckboxComponent({
  isDisabled = false,
  bgColor = '#2A75EC',
}) {
  const [groupValues, setGroupValues] = React.useState([]);
  return (
    <Checkbox.Group onChange={setGroupValues} value={groupValues} accessibilityLabel="choose numbers">
      <Checkbox
        isDisabled={isDisabled}
        value="one"
        bgColor={bgColor}
        borderColor={bgColor}
        colorScheme="red.700"
        borderWidth="2"
        _checked={{ borderColor: bgColor }}
        _pressed={{ tintColor: 'white' }}
      />
    </Checkbox.Group>
  );
}

export default CheckboxComponent;

image of how it looks right now:
import React from 'react';

import { Checkbox } from 'native-base';

function CheckboxComponent({
  isDisabled = false,
  bgColor = '#2A75EC',
}) {
  const [groupValues, setGroupValues] = React.useState([]);
  return (
    <Checkbox.Group onChange={setGroupValues} value={groupValues} accessibilityLabel="choose numbers">
      <Checkbox
        isDisabled={isDisabled}
        value="one"
        bgColor={bgColor}
        borderColor={bgColor}
        colorScheme="red.700"
        borderWidth="2"
        _checked={{ borderColor: bgColor }}
        _pressed={{ tintColor: 'white' }}
      />
    </Checkbox.Group>
  );
}

export default CheckboxComponent;

【问题讨论】：

标签： reactjs react-native native-base

【解决方案1】：

您可以使用 _icon 属性为 Checkbox 的复选标记着色。这是一个最小的工作示例，它将复选标记着色为红色。

import React from "react"
import { HStack, Checkbox } from "native-base"

export const Test = () => {
  return (
    <HStack space={6}>
      <Checkbox value="test"
        _icon={{color: "red"}}
      />  
    </HStack>
  )
}

【讨论】：

【解决方案2】：

@David Scholz 的回答对我不起作用。我用的一样。

【讨论】：