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：当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引用，来调用相应函数，主要用于当不展示内部的导航条而自己实现导航条时：

this.picklist.xxx();

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

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

样例工程

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

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

其他文章

• React Native中自定义导航条
• React Native拍照、从相册选择、录像的实现
• React Native中事件监听和持久化存储的结构化设计
• React Native的ActionSheet实现