rn-switch

#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 开启状态下回调返回的值,默认返回1
• offValue: any 关闭状态下回调返回的值,默认返回0
• onLable: string 默认不开启
• onLableColor: string 开启提示的文字颜色
• offLable: string 默认不开启
• offLableColor: string 关闭提示的文字颜色
• toggleLable: bool 默认为false,即不显示文字提示
• toggleValue: bool true为开启状态,false为关闭状态,默认为false
• onChange: function(val) 修改后触发的回调函数,返回切换后的值