react-native树形结构选择组件

Posted suwu150

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native树形结构选择组件相关的知识,希望对你有一定的参考价值。

react-native-tree-select

react-native-tree-select,树结构选择组件,通过层级展示数据,能够进行多选和单选,进行自定义节点样式等.


=

项目结构

--components: treeSelect组件
--treeSelectExample: 组件演示代码
--.gitignore:git忽略文件
--README.md:说明文档

1.使用说明:

1.基本用法

首先能够通过如下命令进行安装

npm i react-native-tree-select

然后通过下面命令进行导入:

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

如下代码是简单的使用

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

   ...
  render() 
    return (
        <TreeSelect
            data=treeselectData
            // isOpen
            // openIds=['A01']
            defaultSelectedId=['B062']
            isShowTreeId=false
            // selectType="single"
            selectType="multiple"
            itemStyle=
              // backgroudColor: '#8bb0ee',
              fontSize: 12,
              color: '#995962'
            
            selectedItemStyle=
              backgroudColor: '#f7edca',
              fontSize: 16,
              color: '#171e99'
            
            onClick=this._onClick
            onClickLeaf=this._onClickLeaf
            treeNodeStyle=
              // openIcon: <Icon size=18 color="#171e99" style= marginRight: 10  name="ios-arrow-down" />,
              // closeIcon: <Icon size=18 color="#171e99" style= marginRight: 10  name="ios-arrow-forward" />
              openIcon: <Image
                resizeMode="stretch"
                style= width: 18, height: 18 
                source=require('./images/down-circle.png') />,
              closeIcon: <Image
                resizeMode="stretch"
                style= width: 18, height: 18 
                source=require('./images/right-circle.png') />
            
          />
    );
  

注意:数据结构如下面形式:

[
  
    "id":"A",
    "name":"农、林、牧、渔业",
    "sortNo":"A",
    "parentId":"0",
    "children": [
      
        "id":"A01",
        "name":"农业",
        "sortNo":"A01",
        "parentId":"A",
        "children": [
          
            "id":"A011",
            "name":"谷物种植",
            "sortNo":"A011",
            "parentId":"A01"
          ,
          
            "id":"A012",
            "name":"豆类、油料和薯类种植",
            "sortNo":"A012",
            "parentId":"A01"
          ,
          
            "id":"A013",
            "name":"棉、麻、糖、烟草种植",
            "sortNo":"A013",
            "parentId":"A01"
          ,
          
            "id":"A014",
            "name":"蔬菜、食用菌及园艺作物种植",
            "sortNo":"A014",
            "parentId":"A01"
          ,
          
            "id":"A015",
            "name":"水果种植",
            "sortNo":"A015",
            "parentId":"A01"
          ,
          
            "id":"A016",
            "name":"坚果、含油果、香料和饮料作物种植",
            "sortNo":"A016",
            "parentId":"A01"
          ,
          
            "id":"A017",
            "name":"中药材种植",
            "sortNo":"A017",
            "parentId":"A01"
          
        ]
      
    ]
  ,
  
    "id":"B",
    "name":"采矿业",
    "sortNo":"B",
    "parentId":"0",
    "children": [
      
        "id":"B06",
        "name":"煤炭开采和洗选业",
        "sortNo":"B06",
        "parentId":"B",
        "children": [
          
            "id":"B061",
            "name":"烟煤和无烟煤开采洗选",
            "sortNo":"B061",
            "parentId":"B06"
          ,
          
            "id":"B062",
            "name":"褐煤开采洗选",
            "sortNo":"B062",
            "parentId":"B06"
          ,
          
            "id":"B069",
            "name":"其他煤炭采选",
            "sortNo":"B069",
            "parentId":"B06"
          
        ]
      
    ]
  
]

2.传递的Props:

PropsExplaintyperequiredefault
data数据,树结构数据arrayyes[]-
onClick点击时的事件,返回点击的节点和节点路径 item, routes, currentNode functionnonocurrentNode为当前选中的节点
onClickLeaf点击叶子节点时的事件,返回点击的节点和节点路径 item, routes, currentNode functionnonocurrentNode为当前选中的节点
isOpen是否默认打开所有的节点,优先级高于openIds,当true时忽略openIdsbooleannofalse-
openIds指定默认打开的节点idarrayno[]-
defaultSelectedId指定默认选中的节点idarrayno[]-
selectType指定选择的类型stringno‘single’,可传递single/multiple-
leafCanBeSelected指定只能够选择叶子节点booleanfalse--
isShowTreeId指定是否显示节点idbooleannofalse-
itemStyle指定item项的样式,其中包含三个子项backgroudColor:背景的颜色, fontSize:字体大小, color:字体的颜色css styleno-
selectedItemStyle指定点击按钮选中时的样式,其中包含三个子项backgroudColor:选中时的颜色, fontSize:选中时的字体大小, color:选中时字体的颜色css styleno-
treeNodeStyle指定节点处的图标样式,包含两个属性openIcon,closeIcon,支持传icon和image类型objectnonull-

3.本地运行

在本地运行,首先得克隆该项目,使用下面命令进行克隆,克隆地址
先克隆该项目

git clone https://github.com/suwu150/react-native-tree-select.git

然后进入项目,cd treeSelectExample进入到演示项目,通过以下命令安装依赖

npm install

通过以下命令运行项目

react-native run-ios

4.组件简介

能够按照数据结构进行展开树状结构,通常用来进行展示具有明显层级关系的数据结构,展示的同时,能够进行指定默认值展开和默认选中值,能够进行单选和多选操作,进行通过传递props禁止选择等功能.

以上是关于react-native树形结构选择组件的主要内容,如果未能解决你的问题,请参考以下文章

多叉树结合JavaScript树形组件实现无限级树形结构(一种构建多级有序树形结构JSON(或XML)数据源的方法)

vue树形结构的实现--拖拽篇(1)

Element-UI的组件改造的树形选择器(树形下拉框)

关于element-ui的tree树形组件的bug

树形结构

react-native DatePicker日期选择组件的实现