ReactNative: 使用開關組件Switch組件

一、簡介

開關組件就是0和1的互斥關系，0代表關閉，1代表打開。應用中很多時候會使用一個開關組件來控制某些功能是否啟用或禁用。ReactNative中提供了Switch組件來實現開關功能。

 

二、API

它提供的屬性不多，如下所示：

//開關組件當前的值，默認為false
value: PropTypes.bool

//開關組件是否可交互
disabled: PropTypes.bool

//開關組件值發生改變時調用
onValueChange: PropTypes.func

//開關組件唯一標識
testID: PropTypes.string

//開關組件邊框顏色(iOS)，Android則是顯示背景色
tintColor: ColorPropType

//當打開時的背景顏色
onTintColor: ColorPropType

//開關組件前景色
thumbTintColor: ColorPropType

 

三、使用

簡單使用如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Switch
} from 'react-native';


export default class ReactNativeDemo extends Component {

    state = {value:false};

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <Switch
                    value={this.state.value}
                    disabled={false}
                    tintColor={'blue'}
                    onTintColor={'green'}
                    thumbTintColor={'brown'}
                    onValueChange={(value) => this.setState({value:value})}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: 'white'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center',
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);