• 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);

     

  • 相关阅读:
    打印出1-10000之间的所有对称数(如121,1331,2442)
    代码块
    javascript判断数据类型
    块和内嵌
    xhtml+css基础知识2
    xhtml+css基础知识1
    清除浮动
    margin注意问题
    javascirpt 闭包
    css3 box-sizing属性
  • 原文地址:https://www.cnblogs.com/XYQ-208910/p/12149838.html
Copyright © 2020-2023  润新知