React Native多功能选择页面
2019-01-07 本文已影响51人
爱翻身的咸鱼
这是一个多功能的选择页面，支持如下功能：
- 单层或者多层的数据。
- 单选或者多选。
- 显示或者隐藏内部的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：当directBackWhenSingle是true且为单选时，已选中项是否可以被取消选择。 -
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';
还可以根据PickList的ref引用，来调用相应函数，主要用于当不展示内部的导航条而自己实现导航条时：
<PickList
ref={this.picklist = ref}
...
/>
this.picklist.xxx();
这里支持调用的函数如下：
-
getSelectedItems: () => Tree[]：获取当前已选中的树节点，可以参考Tree来处理。 -
backToPreviousPage: () => boolean：多层数据的情况下，自动回退到上一个页面，如果已经是第一个了，则返回false，否则返回true。
样例工程
可以通过如下步骤使用样例工程：
- 进入
example目录，使用yarn或npm install安装第三方模块。然后在终端中运行npm start启动服务。 - 使用
react-native init XXX创建一个样例工程，确保工程的入口文件为index，加载的模块名称为test。
