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

Posted 2023-03-05

【中文标题】如何设置 React Native <CheckBox> 组件的样式？

【英文标题】：How to style React Native <CheckBox> component?

【发布时间】：2018-03-20 04:00:12

【问题描述】：

是否可以为 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 上找不到任何信息。实际上很难在它们周围搜索。

【问题讨论】：

样式选项在默认复选框中受到限制。您需要尝试构建自定义组件或使用这样的库：github.com/crazycodeboy/react-native-check-box

How to change the color of a CheckBox?的可能重复

这不是重复 - 这不是 CSS 问题，而是 react props 问题

【参考方案1】：

Transform 可以用来改变 CheckBox 的大小。

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

checkbox examples

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

【参考方案2】：

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

Android：你可以使用tintColors。

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

【讨论】：

它工作正常，我在我的应用程序中使用。 "@react-native-community/checkbox": "^0.4.2"

是的！小心使用 tintColors（最后有一个 's'），而不是像我以前那样使用 tintColor...

【参考方案3】：

不，我找不到方法，但将其包装在 View 中是一种选择：

   <View style=
      position: 'absolute',
      right: 0,
      width: 50,
      height: 50,
      margin: 10,
      zIndex: 100,
    >
      <Checkbox
        status=i === index ? 'checked' : 'unchecked'
        className=""

      />
    </View>

【参考方案4】：

是的，你可以，我建议你使用 react native 元素，使用这个库你有 2 个选项，checkedColor 和 uncheckedColor，默认情况下，checkedColor 是绿色，但你可以将其更改为你想要的，例如checkedColor="#fff" 或checkedColor="#fff" 试试吧，它申请了2个选项，祝你好运！

【讨论】：

查看文档react-native-elements.github.io/react-native-elements/docs/…

这真的不起作用，在我声明checkedColor或uncheckedColor的那一行有一个“Unexpected token”错误。

【参考方案5】：

简短的回答是你根本做不到。 React Native 使用原生的 android Checkbox 组件，您要做的唯一自定义是更改色调颜色，如 react-native-checkbox community project 中所示。这个道具在 React Native 官方文档中没有记录。

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

【参考方案6】：

现在可以了.. 只是简单地给出与背景颜色相同的色调