React Native多功能选择页面

这是一个多功能的选择页面,支持如下功能:

  • 单层或者多层的数据。
  • 单选或者多选。
  • 显示或者隐藏内部的UI组件。
  • 自定义内部UI组件。
  • 自动搜索功能。
  • 分区样式的页面。

Github地址:https://github.com/gaoxiaosong/react-native-picklist

演示

1.gif
2.gif

Android上有同样的UI效果。

安装

使用Yarn或者NPM安装(二选一):

yarn add react-native-picklist
npm install --save react-native-picklist

使用方法

在文件中导入模块:

import PickList from 'react-native-picklist';

你可以设置下列的属性,可以参照example目录下的样例工程来学习如何使用它。

属性

必填项:

  • title:页面的标题,展示在导航条中间。
  • data:数据对象,用于展示,在内部将使用虚拟节点包裹这个对象,这个对象可以是一个object或者array。

可选项:

  • firstTitleLine:在PickListTitleLine展示的第一个标签,多层数据时有效,展示在层级结构行中。
  • multilevel:是否是多层数据,默认为false
  • multiselect:是否是多选,默认为false
  • onFinish:选择结束后对于结果的回调方法,参数是一个节点数组,对于数组中每项的操作,请参见Tree
  • rightTitle:右上角的按钮标题。
  • rightClick:右上角的按钮点击事件。
  • renderRow:自定义的行展示方法,可以通过传递这个属性,来使列表项只读(即不可选择),默认实现请参照PickListDefaultRow.js
  • renderHeader:自定义页面的头部UI组件。
  • showNaviBar:是否显示导航条,如果使用react-navigation自带的导航条,可以设置为false
  • showBottomView:是否显示底部确认栏。
  • showSearchView:是否显示搜索框。
  • showTitleLine:是否显示层级结构行。
  • showAllCell:是否显示“全选”或“全不选”。
  • showCount:是否显示非叶节点的子节点数量以及选中的数量。
  • numberOfTextLines:每一行的Text组件的最大行数,默认是0,表示无限制的多行显示,你可以设置为1则为单行显示。
  • directBackWhenSingle:当单选时,是否点击后直接选择结束。
  • cancelableWhenDirectBack:当directBackWhenSingletrue且为单选时,已选中项是否可以被取消选择。
  • selectedIds:初始的选中项的Id列表。
  • selectable:判断一个树节点是否可选择的函数。
  • childrenKey:每一个数据项的子节点列表键。
  • idKey:每一个数据项的Id键
  • labelKey:每一个数据项的标签键。
  • searchKeys:每一个数据项的支持搜索的键列表。
  • sort:对于每一级的数据项展示前的排序方法。
  • split:分区展示的分区方法。
  • flatListProps:组件FlatList的自定义属性,当不分区展示的时候。
  • sectionListProps:组件SectionList的自定义属性,当分区展示的时候。
  • searchListProps:组件FlatList的自定义属性,当正在搜索的时候。
  • labels:一些标签的固定文本,用于国际化。

你可以改变标签的文本,用于支持其他语言,也可以改变属性的默认值:

import {InnerPickList} from 'react-native-picklist';

InnerPickList.defaultProps.labels.xxx = 'xxx';

还可以根据PickListref引用,来调用相应函数,主要用于当不展示内部的导航条而自己实现导航条时:

<PickList
    ref={this.picklist = ref}
    ...
/>

this.picklist.xxx();

这里支持调用的函数如下:

  • getSelectedItems: () => Tree[]:获取当前已选中的树节点,可以参考Tree来处理。
  • backToPreviousPage: () => boolean:多层数据的情况下,自动回退到上一个页面,如果已经是第一个了,则返回false,否则返回true

样例工程

可以通过如下步骤使用样例工程:

  1. 进入example目录,使用yarnnpm install安装第三方模块。然后在终端中运行npm start启动服务。
  2. 使用react-native init XXX创建一个样例工程,确保工程的入口文件为index,加载的模块名称为test

其他文章

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容