Как изменить размер компонента переключателя в React Native?
<Switch onValueChange={this._changeReciveNotice.bind(this)}
value={this.state.isReciveNotice}
style={{width:20,height:10}}/>
этот код стиля не влияет на
Как изменить размер компонента переключателя в React Native?
<Switch onValueChange={this._changeReciveNotice.bind(this)}
value={this.state.isReciveNotice}
style={{width:20,height:10}}/>
этот код стиля не влияет на
Вы можете изменить размер переключателя, используя свойство transform из стиля,
<Switch value={true}
style={{ transform: [{ scaleX: .8 }, { scaleY: .8 }] }}
onValueChange={(value) => {}} />
также для лучшего результата определяют значения масштабирования на основе размера экрана.
Чтобы расширить то, что уже было сказано, вот как вы можете обрабатывать размеры экрана:
import { moderateScale } from 'react-native-size-matters';
...
<Switch
style={{ transform: [{ scaleX: moderateScale(1, 0.2) }, { scaleY:
moderateScale(1, 0.2) }] }} />
<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>
Вы должны изменить значение состояния.
Exemple:
<Switch
onValueChange={(value) => this.setState({isReciveNotice: value})}
style={{marginBottom: 10}}
value={this.state.isReciveNotice} />
Я не думаю, что вы можете стилизовать компонент Switch.