react-native-switch-pro

一款适用于 Android 和 iOS 的通用开关组件，堪称 GitHub 上最优秀的 React Native 开关控件。

预览

   

特性

• React Native 平台上近乎完美的开关组件
• 在 iOS 和 Android 设备上均表现优异
• 集成 PanResponder 手势支持
• 采用更多动画效果以匹配 iOS 原生体验
• 支持异步与同步事件
• 支持双向数据绑定
• 代码风格清晰规范

安装

npm install react-native-switch-pro --save

使用方式

• 同步模式

import Switch from 'react-native-switch-pro'
...
  render() {
    return (
      <View style={styles.container}>
        <Switch onSyncPress={value => {...}}/>
      </View>
    )
  }
...

• 异步

...
  render() {
    return (
      <View style={styles.container}>
        <Switch onAsyncPress={(callback) => {
          You can call your async module and just invoke callback(true) when succeed,  
          callback(false) when fail.
        }}/>
      </View>
    )
  }
...

属性

名称	说明	默认值	类型
width	开关宽度	40	number
height	开关高度	21	number
value	开关状态（支持双向绑定）	undefined	bool
disabled	是否禁用点击	false	bool
circleColorActive	开启状态下圆形把手的颜色	white	string
circleColorInactive	关闭状态下圆形把手的颜色	white	string
style	应用于开关容器的样式	undefined	style
circleStyle	应用于圆形把手的样式	undefined	style
backgroundActive	开启状态下的背景色	green	string
backgroundInactive	关闭状态下的背景色	'#ddd'	string
onSyncPress	点击开关时的同步回调	() => null	func
onAsyncPress	带异步结果回调的函数	(value, callback) => {callback(true)}	func

注意事项

• 请避免同时使用 onSyncPress 和 onAsyncPress，否则仅 onSyncPress 会生效。

• value 属性支持与 redux、state 等进行双向绑定。
  在 onAsyncPress 中需按以下方式编写（以 state 为例）：

  <Switch
    value={this.state.value}
    onAsyncPress={(callback) => {
      callback(false 或 true, value => this.setState({value}))
   }}
  />
  

  value => this.setState({value}) 仅在返回结果为 true 时执行。

开源协议

MIT

也许我需要您的帮助

很荣幸能为您开发这个库。
目前我正在寻找一份理想的新工作，如果您能提供机会，请点击这里查看详情。