Skip to content
一个跨平台(iOS和Android)单和多项选择React Native组件。
Branch: master
Clone or download
Latest commit 5b96a87 Apr 13, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/images 初次签入版本 Apr 13, 2016
.npmignore 初次签入版本 Apr 13, 2016
BaseComponent.js 初次签入版本 Apr 13, 2016
LICENSE 初次签入版本 Apr 13, 2016
README.md Update README.md Apr 13, 2016
index.js Update index.js Apr 13, 2016
package.json Update package.json Apr 13, 2016
styles.js 初次签入版本 Apr 13, 2016

README.md

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

You can’t perform that action at this time.