switchButton开关

SwitchButton 开关

概述

1.0开始加入

SwitchButton是一个iOS样式的开关组件

代码演示

受控

import React from 'react';
import { View } from 'react-native';
import { SwitchButton } from 'tuya-panel-kit';

export default class SwitchButtonDemo extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
value: true;
}
}
render() {
return (
<View style={styles.wrapper}>
<SwitchButton
value={this.state.value}
onValueChange={value => { this.setState({ value }); }}
/>
</View>
)
}
}

非受控

import React from 'react';
import { View } from 'react-native';
import { SwitchButton } from 'tuya-panel-kit';

const SwitchButtonDemo = () => (
<View style={styles.wrapper}>
<SwitchButton
defaultValue={true}
onValueChange={value => console.log(value)}
/>
</View>
)

交互演示

API

style

指定包裹switchButton的容器样式

类型(Type) 必传(Required)
ViewProptypes.style

value

当前选中的值,设置了该属性即为受控组件

类型(Type) 必传(Required)
bool

defaultValue

默认选中的值

类型(Type) 必传(Required) 默认值
bool true

size

设置switchButton的大小:

  • width:宽度
  • height:高度
  • activeSize:thumb的大小
  • margin:thumb距离最近边界的大小
类型(Type) 必传(Required) 默认值
Object { width: 52, height: 52, activeSize: 28, margin: 0.5 }

tintColor

设置当switchButton的value为false时背景颜色

类型(Type) 必传(Required) 默认值
Color transparent

onTintColor

设置当switchButton的value为true时颜色

类型(Type) 必传(Required) 默认值
Color #44DB5E

thumbTintColor

设置当switchButton的value为false时thumb颜色

类型(Type) 必传(Required) 默认值
Color #E5E5E5E5

onThumbTintColor

设置当switchButton的value为true时thumb颜色,若没有设置则为thumbTintColor的值

类型(Type) 必传(Required) 默认值
Color

borderColor

设置当switchButton的value为false时边框颜色
当switchButton的value为true时边框颜色等于onTintColor

类型(Type) 必传(Required) 默认值
Color #E5E5E5

disabled

是否禁用switchButton

类型(Type) 必传(Required) 默认值
bool false

onValueChange

改变switchButton值时执行此回调。调用时带有如下参数:

  • value: 改变后的值
类型(Type) 必传(Required)
(value) => void
400-881-8611