React-Native Switch 的简单使用

Switch跨平台通用的可以在两个状态中切换的组件。
注意这是一个“受控组件”（controlled component）。你必须使用onValueChange回调来更新value属性以响应用户的操作。如果不更新value属性，组件只会按一开始给定的value值来渲染且保持不变，看上去就像完全点不动。

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

Switch主要属性：

• value：Switch的开关状态，true打开，false关闭，默认false
• onValueChange：开启关闭Switch状态时的回调函数，参数为新的值，需要在此回调中设置value的状态值。
• onTintColor：开启状态时的背景颜色。
• tintColor：关闭状态时的边框颜色(iOS)或背景颜色(Android)。
• thumbTintColor：开关上圆形按钮的背景颜色。
• disabled：如果为true，这个组件不能进行交互。
• testID：用来在端到端测试中定位此视图。

创建一个Switch：

<Switch style={{marginTop: 20}}
                   onTintColor={'#ffaa11'}
                   tintColor={'#aaaa11'}
                   value={this.state.swicthValue1}
                   onValueChange={(value)=> {
                       //当开关状态改变了，一定要修改value的值，不然最终无法改变状态
                       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)=> {
                       //当开关状态改变了，一定要修改value的值，不然最终无法改变状态
                       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)=> {
                        //当开关状态改变了，一定要修改value的值，不然最终无法改变状态
                        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)=> {
                        //当开关状态改变了，一定要修改value的值，不然最终无法改变状态
                        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设置disabled为true，无法点击，但是可以设置value的值来改变状态</Text>
                    {this._switch3()}
                </View>
            </View>
        )
    }
}
AppRegistry.registerComponent('RNSwitchView', ()=>RNSwitchView);