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 }] }}
/>

checkbox examples

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

Answer 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' }}
 />

Answer 3

React Native CheckBox component在Android上呈现原生复选框组件。

您可以重新设置样式的最简单方法是更改Android项目样式配置（有关如何here的其他说明）。

这是一种简单的方法，可以使您的配色方案与此配色方案保持一致，也可以与最终显示的其他原生组件保持一致，这很棒！

Answer 4

简短的回答是您根本做不到。 React Native使用原生的Android Checkbox组件，唯一要做的定制就是更改颜色，如react-native-checkbox community project所示。该道具未在官方的React Native文档中记录。

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

Answer 5

是的，我可以建议您使用react本机元素，并且使用此库，您可以选择两个选项checkedColor和uncheckedColor，默认情况下，checkedColor是绿色的，但是您可以更改它到您想要的内容，例如checkedColor={"#fff"}或checkedColor="#fff"尝试一下，它适用于2个选项，祝您好运！

Answer 6

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

if (Selection.gameObjects.Length > 0)
        {
            interactedobjects.Clear();

            for (int i = 0; i < Selection.gameObjects.Length; i++)
            {
                foreach(Transform trans in Selection.gameObjects[i].transform)
                {
                    if(trans.GetComponent<SkinnedMeshRenderer>() != null)
                    {
                        size = trans.GetComponent<SkinnedMeshRenderer>().bounds.size;
                    }
                }

                if (Selection.gameObjects[i].GetComponent<FPEInteractableActivateScript>() == null)
                {
                    if (Selection.gameObjects[i].GetComponent<BoxCollider>() == null)
                    {
                        Selection.gameObjects[i].AddComponent<BoxCollider>();
                        Selection.gameObjects[i].GetComponent<BoxCollider>().size = size;
                    }
                    Selection.gameObjects[i].AddComponent<FPEInteractableActivateScript>();
                }

                interactedobjects.Add(Selection.gameObjects[i]);
            }

            interacted = true;
        }

Answer 7

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

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

7 个答案: