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

Question

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

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

此样式代码不起作用

Answer 1

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

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

也是为了获得最佳结果,根据屏幕尺寸确定缩放值.

Answer 2

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

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

...

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

Answer 3

如果尺寸是 UI 问题，则只能添加负边距

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

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