如何设置React Native <CheckBox>组件的样式？

Question

是否可以设置React Native CheckBox组件的样式？

这里没有style列出属性：https : //facebook.github.io/react-native/docs/checkbox.html

我在上面放了一个无效的样式属性，并弹出了RN警告消息，告诉我所有有效的CSS属性，但是它们都不对样式有任何好处。

该组件看起来不错，但我想将其从蓝绿色变为品牌颜色。

可能吗？

这些属性不起作用，但被列为CheckBox的有效样式道具：

{
  height: 50,             // changes the hitspace but not the checkbox itself
  width: 50,
  borderWidth: 1,         // does nothing
  backgroundColor: 'red', // makes the area around and inside the checkbox red
  borderColor: 'green',   // does nothing
  borderStyle: 'dotted'   // does nothing
}

我不明白，如果每个人都自己选择复选框，为什么它甚至存在。如果我那样做，我真的不会有任何用处，因为它所提供的只是

value={this.state.rememberMe}
onValueChange={() => this.toggleRememberMe()}

除非引擎盖下有魔法。它具有不错的onChange动画，但是当我制作自己的动画并使用诸如<TouchableHighlight or Opacity>包裹在开/关图像或上的东西时，它将立即被弃用<View>。

除了数百个自定义复选框，我在Google上找不到任何信息。实际上，很难在它们周围进行搜索。

Answer 1

Transform 可用于更改 CheckBox 大小。

<CheckBox
  style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
/>

复选框示例

https://github.com/react-native-checkbox/react-native-checkbox

Answer 2

您可以使用https://github.com/react-native-community/react-native-checkbox

安卓：可以使用tintColors。

 import CheckBox from '@react-native-community/checkbox';
 .
 .
 .
 <CheckBox
      value={option.item.selected}  
      onValueChange={() => {}}
      tintColors={{ true: '#F15927', false: 'black' }}
 />

Answer 3

简短的回答是你根本不能。React Native 使用原生 Android Checkbox 组件，您要做的唯一自定义就是更改色调颜色，如react-native-checkbox 社区项目中所示。该属性在 React Native 官方文档中没有记录。

此外，这里是该组件的 TypeScript 定义：AndroidCheckBoxNativeComponent.js。请注意，传递到本机组件的唯一属性是onChange、onValueChange、testID、on和enabled。tintColors