通过 Styled-Components 更改 CheckBox 的颜色答案

【问题标题】：Change the color of the CheckBox via Styled-Components通过 Styled-Components 更改 CheckBox 的颜色
【发布时间】：2020-09-28 19:37:32
【问题描述】：

当 CheckBox 被选中时，我需要更改它的颜色。我是这样使用的：

index.js

import CheckBox from '@react-native-community/checkbox';
...
<CheckBoxes>
   <Label>Usuário</Label>
   <CheckBox
       disabled={false}
       value={myValue}
       onValueChange={setMyValue}
   />
</CheckBoxes>

styles.js

export const CheckBoxes = styled.View`
  flex: 0.25;
  flex-direction: row;
  justify-content: flex-start;
  text-decoration-line: none;

  > input:checked {
      color: #999;
  }
`;

我该怎么做？

【问题讨论】：

您是否尝试管理 @react-native-community/checkbox 的 attr checkedColor 和 uncheckedColor ？我不确定样式组件是否可行。或者试试export const CheckBoxes = styled.CheckBox¯_(ツ)_/¯

标签： css react-native styled-components

【解决方案1】：

您尝试过onFillColor、onTintColor 或onCheckColor 吗？

import CheckBox from '@react-native-community/checkbox';
...
<CheckBoxes>
  <Label>Usuário</Label>
    <CheckBox
      disabled={false}
      value={myValue}
      onValueChange={setMyValue}
      onFillColor={yourcolor}
      
 />

【讨论】：

【解决方案2】：

我解决了它在 CheckBox 中设置 tintColors 属性

<CheckBox
   disabled={false}
   value={isDoctor}
   onValueChange={setIsDoctor}
   tintColors={{ true: '#FC8F00' }}
/>

【讨论】：