Switch跨平台通用的可以在两个状态中切换的组件。
注意这是一个“受控组件”（controlled component）。你必须使用onValueChange回调来更新value属性以响应用户的操作。如果不更新value属性，组件只会按一开始给定的value值来渲染且保持不变，看上去就像完全点不动。
35CB35C3-1029-4D8C-A470-DBA0A6D912FE.png
Switch主要属性：
-
value：Switch的开关状态，true打开，false关闭，默认false -
onValueChange：开启关闭Switch状态时的回调函数，参数为新的值，需要在此回调中设置value的状态值。 -
onTintColor：开启状态时的背景颜色。 -
tintColor：关闭状态时的边框颜色(iOS)或背景颜色(Android)。 -
thumbTintColor：开关上圆形按钮的背景颜色。 -
disabled：如果为true，这个组件不能进行交互。 -
testID：用来在端到端测试中定位此视图。
创建一个Switch：
<Switch style={{marginTop: 20}}
onTintColor={'#ffaa11'}
tintColor={'#aaaa11'}
value={this.state.swicthValue1}
onValueChange={(value)=> {
//当开关状态改变了，一定要修改value的值，不然最终无法改变状态
console.log('onValueChange1 =' + value);
this.setState({
swicthValue1: value
})
}}
testID={'one'}
thumbTintColor={'#ff1111'}/>
效果代码：
import React, { Component } from 'react';
import {
AppRegistry,
View,
Switch,
Text
} from 'react-native';
export default class RNSwitchView extends Component {
constructor(props){
super(props);
this.state = {
swicthValue1: true,
swicthValue2: false
}
}
_switch1 =()=>{
return(
<Switch style={{marginTop: 20}}
onTintColor={'#ffaa11'}
tintColor={'#aaaa11'}
value={this.state.swicthValue1}
onValueChange={(value)=> {
//当开关状态改变了，一定要修改value的值，不然最终无法改变状态
console.log('onValueChange1 =' + value);
this.setState({
swicthValue1: value
})
}}
testID={'one'}
thumbTintColor={'#ff1111'}/>
)
};
_switch2 =()=>{
return(
<Switch style={{marginTop: 20}}
onTintColor={'#aaaaff'}
tintColor={'#ffaa11'}
value={this.state.swicthValue2}
onValueChange={(value)=> {
//当开关状态改变了，一定要修改value的值，不然最终无法改变状态
console.log('onValueChange2 =' + value);
this.setState({
swicthValue2: value
})
}}
testID={'two'}
thumbTintColor={'#11ff11'}/>
)
};
_switch3 =()=>{
return(
<Switch onTintColor={'#aafaff'}
tintColor={'#1faa11'}
value={this.state.swicthValue2}
onValueChange={(value)=> {
//当开关状态改变了，一定要修改value的值，不然最终无法改变状态
console.log('onValueChange2 =' + value);
this.setState({
swicthValue2: value
})
}}
testID={'two'}
thumbTintColor={'#f1ff11'}
disabled={true}/>
)
};
render(){
return(
<View style={{flex: 1, backgroundColor: '#dddddd', alignItems: 'center'}}>
<View style={{marginTop: 40, width: 340, height: 200, backgroundColor: '#ffffff', borderRadius: 5, alignItems: 'center'}}>
{this._switch1()}
{this._switch2()}
<Text style={{marginTop: 20, textAlign: 'center'}}>下面的switch设置disabled为true，无法点击，但是可以设置value的值来改变状态</Text>
{this._switch3()}
</View>
</View>
)
}
}
AppRegistry.registerComponent('RNSwitchView', ()=>RNSwitchView);
