Package Exports

react-native-z-tree-select
react-native-z-tree-select/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-z-tree-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-z-tree-select

一个好用的react-native树选择组件，支持单选/多选，支持分步加载，支持树中的单项自定义判断是否可选，支持自定义图标，支持节点搜索。

灵感来源于https://github.com/suwu150/react-native-tree-select这个项目，但是发现这个项目已经不再维护了，一些业务需要无法满足，所以对它做了一些改造，增加了自定义判断是否可选、支持分步加载、节点搜索的功能。

一、安装使用

npm install react-native-z-tree-select --save

二、属性与数据结构

组件props属性：

export interface TreeSelectProps {
    data: TreeItem[];//树型结构数据
    selectType?: 'single' | 'multiple',//选择类型：单选/多选
    onClick?: (p: LeafClickProps) => void;//节点点击事件
    onClickLeaf?: (p: LeafClickProps) => void;//叶子节点点击事件
    isOpen?: boolean;//是否默认打开所有节点，优先级高于openIds，当true时忽略openIds
    openIds?: TreeItem['id'][];//指定默认打开的节点id
    isShowTreeId?: boolean;//指定是否显示节点id
    itemStyle?: (e:TreeItem) =>object;//指定item项的样式,其中包含三个子项backgroudColor：背景的颜色, fontSize：字体大小, color：字体的颜色，可根据TreeItem数据进行自定义展示
    selectedItemStyle?: (e:TreeItem) =>object;//指定点击按钮选中时的样式,其中包含三个子项backgroudColor：选中时的颜色, fontSize：选中时的字体大小, color：选中时字体的颜色，可根据TreeItem数据进行自定义展示
    treeNodeStyle?: {//指定节点处的图标样式，包含两个属性openIcon，closeIcon,支持传icon和image类型
        openIcon?: ReactElement;
        closeIcon?: ReactElement;
    };
    searchAble?:boolean,//是否打开节点搜索栏
    leafCanBeSelected?:boolean,//指定只能够选择叶子节点
    defaultSelectedId?:Array<any>,//指定默认选中的节点id
    lazySelectedId?:Array<any>,//分步加载数据时，需要更新的当前选择节点
}

数据结构：

export interface TreeItem {
    id: string;
    name: string;
    parentId: string;
    children?: TreeItem[];
    checkAble?: boolean;//是否可选，若不可选则背景颜色默认置灰，点击选择后默认不进行高亮展示
}

三、示例

import ZTreeSelect from 'react-native-tree-select';

<ZTreeSelect
    data={deptAndUser}
    // lazySelectedId={[currentId]}
    isShowTreeId={false}
    selectType="single"
    itemStyle={(item) => {
      return {
        // backgroudColor:'#fff',
        fontSize: 14,
        // color: item.checkAble ? '#000000' : '#ccc'
      }
    }}
    selectedItemStyle={(item) => {
      return {
        // backgroudColor:  item.checkAble ? '#f7d79b' : '#fff',
        fontSize: 14,
        // color: '#171e99'
      }
    }}
    onClick={(item) => {
      console.log('当前选中的节点：', item);
      setSelectParams(item);
      //分步加载使用下面的内容进行数据请求和处理
      // if (!item.item.children) {
      //     loadData(item.currentNode);
      // }else{
      //     setCurrentId(item.currentNode)
      // }

    }}
    onClickLeaf={() => {
    }}
    searchAble={true}
/>