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

Answer 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>

Answer 5

我假设您的意思是反应开关。只需将其添加到样式表即可。

.react-switch-bg {
  transform: scale(0.7, 0.7);
}

.react-switch-handle {
  width: 10px !important;
  height: 10px !important;
  top: 9px !important;
  left: 5px;
}

Answer 6

您必须更改状态值。

为例：

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

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

如何在React Native中更改交换机组件的大小？

6 个答案: