Skip to content

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

License

Notifications You must be signed in to change notification settings

hinet/react-native-checkboxlist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

example

示例2

example

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published