rn 开关组件Switch

蔚落 2021-07-25 01:08 487阅读 0赞

开关组件
    1、引入
    	import { View, Switch, StyleSheet } from "react-native";
    
    2、使用
        <Switch
            trackColor={
       { false: "#767577", true: "#81b0ff" }}
            thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
            ios_backgroundColor="#3e3e3e"
            onValueChange={toggleSwitch}
            value={isEnabled}
          />
          
    3、参数
    	trackColor={false: color, true: color}  开启/关闭状态时的背景颜色。
    	ios_backgroundColor='x'	在iOS上，自定义背景颜色。当开关值为false或开关被禁用时(开关是半透明的)，可以看到这个背景颜色。
    	onValueChange	当值改变的时候调用此回调函数，参数为新的值。
    	testID	用来在端到端测试中定位此视图。
    	thumbColor='x'	开关上圆形按钮的背景颜色。在 iOS 上设置此颜色会丢失按钮的投影。
    	tintColor='x' 	关闭状态时的边框颜色(iOS)或背景颜色(Android)。
    	value=布尔值变量	表示此开关是否打开。默认为 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>
                </>
            )
        }
    }