react-native-tree-select

react-native-tree-select
樹結構選擇元件

專案結構

--components： treeSelect元件
--treeSelectExample： 元件演示程式碼
--.gitignore：git忽略檔案
--README.md：說明文件

Example usage:

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
        onClick={this._onClick}
        onClickLeaf={this._onClickLeaf}
      />
    );
  }

注意：資料結構如下面形式：

[
  {
    "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:

3.本地執行
在本地執行，首先得克隆該專案，使用下面命令進行克隆
先克隆該專案

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

然後進入專案，cd treeSelectExample進入到演示專案，通過以下命令安裝依賴

  npm install

通過以下命令執行專案

  react-native run-ios

4.元件簡介
能夠按照資料結構進行展開樹狀結構，通常用來進行展示具有明顯層級關係的資料結構