react native Switch使用详解

Switch：开关控件

主要属性：

value:是否打开。默认为false

disabled:是否禁用 默认false

onTintColor：打开时背景色

thumbTintColor：圆形按钮的背景颜色

tintColor：关闭时的边框颜色(iOS)或者背景颜色(Android)。

onValueChange：value值发生变化时的回调，参数为当前Switch的值。

提示：如果想要切换Switch，必须改变value值，否则Switch保持不变。

Demo：

import React, {Component} from 'react';
import {
StyleSheet,
View,
Switch,
Text,
Button,
} from 'react-native';

export default class SwitchDemo extends Component {

state = {
value: false,
disabled: false,
changeTxt:'切换Switch',
}

render() {
return (
<View style={{flex:1}}>
<View style={{flexDirection:'row',paddingLeft:20}}>
<Button title={this.state.value?'关闭':'打开'}
onPress={()=>{this.setState({value:!this.state.value});}}></Button>
<Switch style={{marginLeft:20}} value={this.state.value} onTintColor='red' tintColor='blue'
thumbTintColor='black'/>
</View>

<View style={{flexDirection:'row',paddingLeft:20,marginTop:20}}>
<Button title={this.state.disabled?'启用':'禁用'}
onPress={()=>{this.setState({disabled:!this.state.disabled});}}></Button>
<Switch style={{marginLeft:20}} value={true} disabled={this.state.disabled}/>
</View>

<View style={{flexDirection:'row',paddingLeft:20,marginTop:20}}>
<Text>{this.state.changeTxt}</Text>
<Switch value={this.state.value} onValueChange={(value)=>{
this.setState({
value:value,
changeTxt:value?'switch 打开了':'switch 关闭了'
});

}}/>
</View>

</View>
);
}
}

效果图



github下载地址