一个跨平台(iOS和Android)单和多项选择React

react-native-checkboxlist

一个跨平台(iOS和Android)单和多项选择React Native组件。此组件基于react-native-multiple-choice

安装

npm install react-native-checkboxlist --save 使用

这里是组件使用的概述。

import CheckboxList from 'react-native-checkboxlist' 使用示例1

<CheckboxList options={[ 'Lorem ipsum dolor sit', 'Lorem ipsum', 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr', 'Lorem ipsum dolor sit amet, consetetur' ]} selectedOptions={['Lorem ipsum']} maxSelectedOptions={2} onSelection={(option)=>alert(option + ' was selected!')} /> 使用示例2

分别设置值和显示文字

<CheckboxList options={[ {label:'Lorem ipsum dolor sit',value:'A'}, {label:'Lorem ipsum',value:'B'}, {label:'Lorem ipsum dolor sit amet, consetetur sadipscing elitr',value:'C'}, {label:'Lorem ipsum dolor sit amet, consetetur',value:'D'} ]} selectedOptions={['A','C']} onSelection={(option)=>alert(option + ' was selected!')} /> 属性 style - {} custom style of the list optionStyle - {} custom style of the option element options - [] required array of options selectedOptions - [] optional array of initially selected options maxSelectedOptions - int optional maximum number of selectable options onSelection - function(option){} option selection callback renderIndicator - function(option) should return a selected/deselected indicator node, default: check mark image renderSeparator - function(option) should return a separator node that is displayed between the options, default: gray line renderText - function(option) should return a text node, default: text node renderRow - function(option) should return a option view disabled - bool if set to true component is disabled and can't be interacted with 截图

示例1

示例2

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。