rn-project/src/components/switch.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

'use strict';

import React, { Component } from 'react';
import { StyleSheet, Switch } from 'react-native';
import PropTypes from 'prop-types';

/**
 * 使用方法
 * 
 * 
   <Swt
            value={this.state.value}
            disabled={false}
            onTintColor={'green'} //打开时的背景色
            thumbTintColor={'#fff'} //圆形按钮的背景色
            tintColor={'green'} //关闭时的边框颜色(iOS)或者背景颜色(Android)。 
            onValueChange={
              (value) => {
                this.setState({
                  value: value,
                  ChangeText:value?'开关打开了':"开关关闭了"
                })
              }
            }  
          />

 */

export default class SwitchComponent extends Component {
  static defaultProps = {
    value: true,
    disabled: false,
    onTintColor: 'green',
    thumbTintColor: '#fff',
    tintColor: '#fff',
  };
  static propTypes = {
    value: PropTypes.bool, //是否打开
    disabled: PropTypes.bool, //是否禁用
    onTintColor: PropTypes.string, //打开时的背景色
    thumbTintColor: PropTypes.string, //圆形按钮的背景色
    tintColor: PropTypes.string, //关闭时的边框颜色(iOS)或者背景颜色(Android)。
    onValueChange: PropTypes.func, //value值发生变化时的回调，参数为当前Switch的值。
  };

  constructor(props) {
    super(props);
  }

  render() {
    const {
      value,
      disabled,
      onTintColor,
      thumbTintColor,
      tintColor,
      onValueChange,
    } = this.props;

    return (
      <Switch
        value={value}
        disabled={disabled}
        onTintColor={onTintColor}
        thumbTintColor={thumbTintColor}
        tintColor={tintColor}
        onValueChange={onValueChange}
      />
    );
  }
}