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下载地址