Switch
参考文档
跨平台通用的“开关”组件。
注意这是一个“受控组件”（controlled component）。你必须使用onValueChange回调来更新value属性以响应用户的操作。如果不更新value属性，组件只会按一开始给定的value值来渲染且保持不变，看上去就像完全点不动。
@keyword checkbox @keyword toggle @keyword 单选 @keyword 多选
Props
| 属性 | 类型 | 必填 | 描述 |
| disabled | bool | 否 | 如果为true则禁用此组件的交互。 |
| onTintColor | color | 否 | 开启状态时的背景颜色。 |
| onValueChange | function | 否 | 当值改变的时候调用此回调函数，参数为新的值。 |
| testID | string | 否 | 用来在端到端测试中定位此视图 |
| thumbTintColor | color | 否 | 开关上圆形按钮的背景颜色。在iOS上设置此颜色会丢失按钮的投影。 |
| tintColor | color | 否 | 关闭状态时的边框颜色(iOS)或背景颜色(Android)。 |
| value | bool | 否 | 表示此开关是否打开。默认为false（关闭状态）。 |
Example
示例
import React, { Component } from 'react';
import {Switch,StyleSheet,} from 'react-native';
export class pageComponent extends Component {
constructor(props){
super(props);
this.state={
swicthValue: false
}
}
onChange =(value)=>{
this.setState({
value: value
})
};
render(){
return(
<Switch style={styles.switch}
onTintColor={'#ff00ff'}
tintColor={'#00ffff'}
value={this.state.swicthValue}
onValueChange={(value)=> {
//修改value的值，不然无法改变状态
this.setState({
swicthValue: value
})
}}
testID={'one'}
thumbTintColor={'#ffff00'}/>
)
}
}
const styles = StyleSheet.create({
switch: {
marginTop: 100,
},
});