rn 开关组件Switch

开关组件
	<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>
            </>
        )
    }
}
发布了619 篇原创文章 · 获赞 3 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/105113984
RN