1.0.3 • Published 7 years ago
react-native-sf-switch v1.0.3
react-native-sf-switch
switch
安装
npm install react-native-sf-switch
Props
| parameter | type | required | description | default |
|---|---|---|---|---|
| width | number | no | 宽度 | 80 |
| height | number | no | 高度 | 30 |
| checked | bool | no | 是否选中 | false |
| disabled | bool | no | 是否不可修改 | 0 |
| duration | number | no | 动画时间（单位毫秒） | 300' |
| borderColor | string | no | 边框颜色 | 'rgba(233,233,233,1)' |
| disabledOpacity | number | no | 不可修改时的透明度(0.0-1.0) | 0.5 |
| containerColor | string | no | 背景颜色 | 'red' |
| containerStyle | object | no | 容器样式（主要设置位置相关） | null |
| onChange | func | no | change 事件触发的回调函数 | null |
| tag | func | number | 标示 | 0 |
例子
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import SFSwitch from "react-native-sf-switch"
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<SFSwitch/>
<SFSwitch disabled={true} containerStyle={{
marginTop:20
}}/>
<SFSwitch containerStyle={{
marginTop:20
}} checked={true}/>
<SFSwitch containerStyle={{
marginTop:20
}} checked={true} disabled={true}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
});