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

    其他文章