rn-switch
v0.2.2
Published
react-native 开关组件
Downloads
3
Maintainers
Readme
#rn-switch 开关组件
效果
例子
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import {Switch} from 'rn-switch';
class App extends Component{
constructor(props) {
super(props);
this.state={value:1};
}
switchChange(val){
this.setState({value:val})
}
render(){
return (
<View style={{marginTop:20}}>
<Text>{this.state.value}</Text>
<Switch toggleValue={this.state.value}
onChange={this.switchChange.bind(this)}
></Switch>
<Switch toggleValue="0"
width={100}
onBackgroundColor="red"
onChange={this.switchChange.bind(this)}
></Switch>
<Switch toggleValue="1"
width={100}
toggleLable={true}
onChange={this.switchChange.bind(this)}
></Switch>
<Switch toggleValue="1"
onLable="开"
offLable="关"
height={30}
onLableColor="red"
toggleLable={true}
onChange={this.switchChange.bind(this)}
></Switch>
<Switch toggleValue="1"
disabled={true}
toggleLable={true}
onChange={this.switchChange.bind(this)}
></Switch>
</View>
)
}
}
AppRegistry.registerComponent('App', () => App);
属性
width
:number
开关组件宽度height
:number
开关组件高度duration
:number
动画速率,默认为200
disabled
:bool
默认false
disabledStyle
:object
禁用后的样式onBackgroundColor
:string
开启状态下的背景颜色offBackgroundColor
:string
关闭状态下的背景颜色onValue
:any
开启状态下回调返回的值,默认返回1offValue
:any
关闭状态下回调返回的值,默认返回0onLable
:string
默认不开启onLableColor
:string
开启提示的文字颜色offLable
:string
默认不开启offLableColor
:string
关闭提示的文字颜色toggleLable
:bool
默认为false
,即不显示文字提示toggleValue
:bool
true
为开启状态,false
为关闭状态,默认为falseonChange
:function(val)
修改后触发的回调函数,返回切换后的值