Switch跨平臺通用的可以在兩個狀態(tài)中切換的組件。
注意這是一個“受控組件”（controlled component）。你必須使用onValueChange回調(diào)來更新value屬性以響應(yīng)用戶的操作。如果不更新value屬性，組件只會按一開始給定的value值來渲染且保持不變，看上去就像完全點不動。

35CB35C3-1029-4D8C-A470-DBA0A6D912FE.png

Switch主要屬性：

• value：Switch的開關(guān)狀態(tài)，true打開，false關(guān)閉，默認false
• onValueChange：開啟關(guān)閉Switch狀態(tài)時的回調(diào)函數(shù)，參數(shù)為新的值，需要在此回調(diào)中設(shè)置value的狀態(tài)值。
• onTintColor：開啟狀態(tài)時的背景顏色。
• tintColor：關(guān)閉狀態(tài)時的邊框顏色(iOS)或背景顏色(Android)。
• thumbTintColor：開關(guān)上圓形按鈕的背景顏色。
• disabled：如果為true，這個組件不能進行交互。
• testID：用來在端到端測試中定位此視圖。

創(chuàng)建一個Switch：

<Switch style={{marginTop: 20}}
                   onTintColor={'#ffaa11'}
                   tintColor={'#aaaa11'}
                   value={this.state.swicthValue1}
                   onValueChange={(value)=> {
                       //當開關(guān)狀態(tài)改變了，一定要修改value的值，不然最終無法改變狀態(tài)
                       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)=> {
                       //當開關(guān)狀態(tài)改變了，一定要修改value的值，不然最終無法改變狀態(tài)
                       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)=> {
                        //當開關(guān)狀態(tài)改變了，一定要修改value的值，不然最終無法改變狀態(tài)
                        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)=> {
                        //當開關(guān)狀態(tài)改變了，一定要修改value的值，不然最終無法改變狀態(tài)
                        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設(shè)置disabled為true，無法點擊，但是可以設(shè)置value的值來改變狀態(tài)</Text>
                    {this._switch3()}
                </View>
            </View>
        )
    }
}
AppRegistry.registerComponent('RNSwitchView', ()=>RNSwitchView);