开关组件
<Switch />
属性:
1、value属性控制开关闭合,传入布尔值
value={布尔值}
2、onValueChange回调函数控制value的变化
onValueChange={this.回调函数}
其中:
回调函数的形参就是组件点击开关时对应的布尔值,将其传给value绑定的变量
就可实现点击开关动态改变value的值,即就可动态修改value
3、thumbColor为按钮颜色
4、trackColor当开关点击关闭对应的滑条颜色
trackColor={{true:'颜色',false:'颜色'}}
代码示例:
import React,{Component} from 'react'
import {View,Text,StyleSheet,Switch} from 'react-native'
export default class App extends Component{
constructor(){
super();
this.label={false:'关',true:'开'};
this.state={
switchvalue:true,
}
}
kaiguan=(value)=>{
this.setState({
switchvalue:value
})
}
render(){
return(
<>
<View>
<Switch
onValueChange={this.kaiguan}
value={this.state.switchvalue}
thumbColor='blue'
trackColor={{false:'yellow',true:'red'}}
/>
<View><Text>{this.label[this.state.switchvalue]}</Text></View>
</View>
</>
)
}
}