如何在 React Native 中更改开关组件的大小？答案

【问题标题】：How to change the switch component's size in React Native?如何在 React Native 中更改开关组件的大小？
【发布时间】：2016-09-21 10:04:38
【问题描述】：

如何在 React Native 中改变 switch 组件的大小？

<Switch onValueChange={this._changeReciveNotice.bind(this)}
        value={this.state.isReciveNotice}
        style={{width:20,height:10}}/>

此样式代码不起作用

【问题讨论】：

标签： react-native

【解决方案1】：

您可以使用样式中的 transform 属性来调整开关的大小，

<Switch value={true}
style={{ transform: [{ scaleX: .8 }, { scaleY: .8 }] }}
onValueChange={(value) => {}} />

为了获得最佳效果，还要根据屏幕尺寸确定缩放值。

【讨论】：

是的，我自己也遇到过这个问题，并且一直在使用这种方法来扩展所有 android 和 iOS 设备。
对我来说尺寸对于 android 来说还不错，但对于 ios 来说尺寸太大了。这对我有帮助。谢谢

【解决方案2】：

为了扩展已经说过的内容，您可以通过以下方式处理屏幕尺寸：

import { moderateScale } from 'react-native-size-matters';

...

<Switch 
   style={{ transform: [{ scaleX:  moderateScale(1, 0.2) }, { scaleY:  
   moderateScale(1, 0.2) }] }} />

【讨论】：

【解决方案3】：

如果尺寸只是 UI 问题，您可以添加负边距

例如，在我的情况下，我会降低高度（一点点）以保持对齐：

<Switch style={{marginVertical: -8}} />

【讨论】：

【解决方案4】：

        <View
      style={{
        backgroundColor: this.state.value
          ? "rgba(81, 195, 157, 0.16)"
          : "rgba(204, 204, 204, 0.16)",
        borderRadius: 50,
        paddingVertical: 2,
        paddingHorizontal: 4
      }}
    >
      <Switch
        tintColor="transparent"
        thumbTintColor={this.state.value ? "#51c39d" : "#cccccc"}
        onTintColor="transparent"
        value={this.state.value}
        style={{ transform: [{ scaleX: 1.3 }, { scaleY: 1.3 }] }}
        onValueChange={value => this.setState({ value })}
      />
    </View>

【讨论】：

只是自定义开关组件的一种方式。
这不是对代码的解释。您应该说明如何自定义开关组件以做出更好的答案。这个问题的其他答案可以给你一个他们如何解释他们的代码的例子。

【解决方案5】：

您必须更改状态值。

示例：

<Switch
    onValueChange={(value) => this.setState({isReciveNotice: value})}
    style={{marginBottom: 10}}
    value={this.state.isReciveNotice} />

我认为您不能对 Switch 组件进行样式化。

【讨论】：

哎呀，你可以看看这个npm模块：github.com/recr0ns/react-native-material-switch我没试过