Checkbox.md

<Checkbox /> 复选框

Checkbox 组件定义一个复选框, 具有选中、非选中两种状态。

Props

Prop	Type	Default	Note
TouchableOpacity props...			Checkbox 组件继承 TouchableOpacity 组件的全部属性。
checked	bool	false	是否勾选。
defaultChecked	bool	false	默认是否勾选，仅创建时使用一次，不想自行监听维护 checked 状态时用 defaultChecked 代替。
size	string	'md'	显示尺寸大小。 - lg: 大 - md: 中 - sm: 小 显示效果参见Screenshots。
title	string number element		标题, 可以是字符串、数字或 React Native 组件。
titleStyle	同Text.style		标题样式, 当 title 类型为 element 时无效。
checkedIcon	同Image.source element		已勾选图标
checkedIconStyle	同Image.style		已勾选图标样式
uncheckedIcon	同Image.source element		未勾选图标
uncheckedIconStyle	同Image.style		未勾选图标样式
disabled	bool	false	继承自 TouchableOpacity, 为 true 时组件显示为半透明且不可触摸。
hitSlop	同TouchableOpacity.hitSlop	{top: 8, bottom: 8, left: 8, right: 8}	继承自 TouchableOpacity 并修改默认值。

Events

Event Name	Returns	Notes
TouchableOpacity events...		Checkbox 组件继承 TouchableOpacity 组件的全部事件。
onChange	checked	当 checked 状态发生变更时调用, 值为修改后的 checked。

Example

简单用法

<Checkbox
  title='Default'
  checked={this.state.checked}
  onChange={checked => this.setState({checked})}
  />

使用 size 属性

<Checkbox
  title='Large'
  size='lg'
  checked={this.state.checked}
  onChange={checked => this.setState({checked})}
  />

自定义

<Checkbox
  title='Custom'
  titleStyle={{color: '#8a6d3b', paddingLeft: 4}}
  checkedIcon={<Image style={{width: 15, height: 15, tintColor: '#8a6d3b'}} source={require('../icons/checkbox_checked.png')} />}
  uncheckedIcon={<Image style={{width: 15, height: 15, tintColor: '#8a6d3b'}} source={require('../icons/checkbox_unchecked.png')} />}
  checked={this.state.checkedCustom}
  onChange={checked => this.setState({checkedCustom: checked})}
  />

Screenshots