项目作者: ismayilmalik

项目描述 :
Checkbox component for ReactNative
高级语言: JavaScript
项目地址: git://github.com/ismayilmalik/react-native-checkbox-heaven.git
创建时间: 2017-03-22T18:49:08Z
项目社区:https://github.com/ismayilmalik/react-native-checkbox-heaven

开源协议:MIT License

下载


react-native-checkbox-heaven

ReactNative Checkbox components which contains 17 design type.Built in with the help
of react-native-vector-icons. Currently supports icon sets:

I categorized checkboxes to 3 type:

  1. Edge (outlined icon for both state)
  2. Fill (filled icon for both state)
  3. Mix (outlined for unchecked, filled for checked state)

Default checkboxes

Imgur

Styled checkboxes

Imgur

Installation guide

  1. First react-native-vector-icons must be installed and linked
  2. Run: $ npm install react-native-checkbox-heaven --save

Examples

1.Import component

  1. import CheckBox from 'react-native-checkbox-heaven';

2.Basic use (default icon is iosMix)

  1. <CheckBox
  2. onChange={(val) => alert(val)}
  3. checked={true}
  4. />

3.Full

  1. import React, { Component } from 'react';
  2. import {
  3. AppRegistry,
  4. StyleSheet,
  5. Text,
  6. View
  7. } from 'react-native';
  8. import CheckBox from 'react-native-checkbox-heaven'
  9. export default class checkboxDemo extends Component {
  10. state = {
  11. checked: false
  12. }
  13. handleOnChange(val) {
  14. this.setState({ checked: val })
  15. }
  16. render() {
  17. return (
  18. <View style={styles.container}>
  19. <CheckBox
  20. label='demo label'
  21. labelStyle={styles.labelStyle}
  22. iconSize={28}
  23. iconName='matMix'
  24. checked={this.state.checked}
  25. checkedColor='#008080'
  26. uncheckedColor='#8b0000'
  27. onChange={this.handleOnChange.bind(this)}
  28. disabled={true}
  29. disabledColor='red'
  30. ></CheckBox>
  31. </View>
  32. );
  33. }
  34. }
  35. const styles = StyleSheet.create({
  36. container: {
  37. flex: 1,
  38. justifyContent: 'center',
  39. alignItems: 'center',
  40. backgroundColor: '#F5FCFF',
  41. },
  42. labelStyle: {
  43. marginLeft: 4,
  44. fontSize: 16,
  45. fontWeight: 'bold',
  46. color: '#2f4f4f'
  47. }
  48. });
  49. AppRegistry.registerComponent('checkboxDemo', () => checkboxDemo);

API

Property Type Default Value Description
style object {} Style for TouchableOpacity
checked bool false Checbox state
onChange func Handler function for button press. Required
labelPosition string ‘right’ Position for label (‘right’ or ‘left’)
labelStyle object {fontSize:16,marginLeft:3} Style for Text
iconName string ‘iosMix’ Icon name
iconStyle object {} Custom style for Icon react-native-vector-icons
iconSize number 30 Icon size
checkedColor string ‘#464646’ Icon color for checked state
uncheckedColor string ‘#464646’ Icon color for checked state
disabled bool false Disable checkbox
disabledColor string ‘#888’ Disabled color

License

This project is licenced under the MIT License.

Contribution

Speacial thanks to udarts, Maksim Degtyarev and pitchourou.
Any contribution welcome!