{"id":22648025,"url":"https://github.com/suwu150/react-native-tree-select","last_synced_at":"2025-08-21T18:33:23.109Z","repository":{"id":57341007,"uuid":"136483769","full_name":"suwu150/react-native-tree-select","owner":"suwu150","description":"react-native-tree-select组件树形结构选择","archived":false,"fork":false,"pushed_at":"2023-12-03T06:00:47.000Z","size":2455,"stargazers_count":68,"open_issues_count":13,"forks_count":28,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-09T07:38:29.246Z","etag":null,"topics":["react-native-tree-select"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-tree-select","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/suwu150.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-07T13:46:49.000Z","updated_at":"2024-11-27T02:27:38.000Z","dependencies_parsed_at":"2024-06-18T19:46:46.738Z","dependency_job_id":"b9c05e8f-fef7-4341-b6c9-6a767f235fd0","html_url":"https://github.com/suwu150/react-native-tree-select","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.125,"last_synced_commit":"e223388654d2ce654989093ece75104e0a4299b8"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suwu150%2Freact-native-tree-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suwu150%2Freact-native-tree-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suwu150%2Freact-native-tree-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suwu150%2Freact-native-tree-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suwu150","download_url":"https://codeload.github.com/suwu150/react-native-tree-select/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230527866,"owners_count":18240051,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native-tree-select"],"created_at":"2024-12-09T07:37:25.017Z","updated_at":"2024-12-20T03:09:35.835Z","avatar_url":"https://github.com/suwu150.png","language":"JavaScript","readme":"\n# react-native-tree-select\n\nreact-native-tree-select:树结构选择组件\n\n\n\n请注意，在组件中使用了图片组件react-native-vector-icons的依赖，使用时，请添加该依赖项。\n引用位置和方式如下：\n\n```\nimport Ionicons from 'react-native-vector-icons/Ionicons';\n\n```\n\n##### 一、效果展示\n\n----\n\n![react-native-tree-select](https://github.com/suwu150/react-native-tree-select/assets/20339760/0b2b0f55-f548-413a-bd27-cfa1f785b6a9)\n![shareComponet](https://github.com/suwu150/react-native-tree-select/assets/20339760/b7955b08-173b-4215-bed4-251f655497c6)\n\n\n##### 二、项目结构\n\n```js\n\n--components： treeSelect组件\n--example： 组件演示代码\n--.gitignore：git忽略文件\n--README.md：说明文档\n\n```\n\n##### 三、Example usage:\n---------------------------------------\n###### 3.1 基本用法\n\n 首先能够通过如下命令进行安装\n\n```$xslt\nnpm i react-native-tree-select\n```\n然后通过下面命令进行导入：\n```$xslt\nimport TreeSelect from 'react-native-tree-select';\n```\n如下代码是简单的使用\n\n```javascript\nimport TreeSelect from 'react-native-tree-select';\n\n   ...\n  render() {\n    return (\n        \u003cTreeSelect\n            data={treeselectData}\n            // isOpen\n            // openIds={['A01']}\n            defaultSelectedId={['B062']}\n            isShowTreeId={false}\n            // selectType=\"single\"\n            selectType=\"multiple\"\n            itemStyle={{\n              // backgroudColor: '#8bb0ee',\n              fontSize: 12,\n              color: '#995962'\n            }}\n            selectedItemStyle={{\n              backgroudColor: '#f7edca',\n              fontSize: 16,\n              color: '#171e99'\n            }}\n            onClick={this._onClick}\n            onClickLeaf={this._onClickLeaf}\n            treeNodeStyle={{\n              // openIcon: \u003cIcon size={18} color=\"#171e99\" style={{ marginRight: 10 }} name=\"ios-arrow-down\" /\u003e,\n              // closeIcon: \u003cIcon size={18} color=\"#171e99\" style={{ marginRight: 10 }} name=\"ios-arrow-forward\" /\u003e\n              openIcon: \u003cImage\n                resizeMode=\"stretch\"\n                style={{ width: 18, height: 18 }}\n                source={require('./images/down-circle.png')} /\u003e,\n              closeIcon: \u003cImage\n                resizeMode=\"stretch\"\n                style={{ width: 18, height: 18 }}\n                source={require('./images/right-circle.png')} /\u003e\n            }}\n          /\u003e\n    );\n  }\n```\n注意：数据结构如下面形式：\n```json\n[\n  {\n    \"id\":\"A\",\n    \"name\":\"农、林、牧、渔业\",\n    \"sortNo\":\"A\",\n    \"parentId\":\"0\",\n    \"children\": [\n      {\n        \"id\":\"A01\",\n        \"name\":\"农业\",\n        \"sortNo\":\"A01\",\n        \"parentId\":\"A\",\n        \"children\": [\n          {\n            \"id\":\"A011\",\n            \"name\":\"谷物种植\",\n            \"sortNo\":\"A011\",\n            \"parentId\":\"A01\"\n          },\n          {\n            \"id\":\"A012\",\n            \"name\":\"豆类、油料和薯类种植\",\n            \"sortNo\":\"A012\",\n            \"parentId\":\"A01\"\n          },\n          {\n            \"id\":\"A013\",\n            \"name\":\"棉、麻、糖、烟草种植\",\n            \"sortNo\":\"A013\",\n            \"parentId\":\"A01\"\n          },\n          {\n            \"id\":\"A014\",\n            \"name\":\"蔬菜、食用菌及园艺作物种植\",\n            \"sortNo\":\"A014\",\n            \"parentId\":\"A01\"\n          },\n          {\n            \"id\":\"A015\",\n            \"name\":\"水果种植\",\n            \"sortNo\":\"A015\",\n            \"parentId\":\"A01\"\n          },\n          {\n            \"id\":\"A016\",\n            \"name\":\"坚果、含油果、香料和饮料作物种植\",\n            \"sortNo\":\"A016\",\n            \"parentId\":\"A01\"\n          },\n          {\n            \"id\":\"A017\",\n            \"name\":\"中药材种植\",\n            \"sortNo\":\"A017\",\n            \"parentId\":\"A01\"\n          }\n        ]\n      }\n    ]\n  },\n  {\n    \"id\":\"B\",\n    \"name\":\"采矿业\",\n    \"sortNo\":\"B\",\n    \"parentId\":\"0\",\n    \"children\": [\n      {\n        \"id\":\"B06\",\n        \"name\":\"煤炭开采和洗选业\",\n        \"sortNo\":\"B06\",\n        \"parentId\":\"B\",\n        \"children\": [\n          {\n            \"id\":\"B061\",\n            \"name\":\"烟煤和无烟煤开采洗选\",\n            \"sortNo\":\"B061\",\n            \"parentId\":\"B06\"\n          },\n          {\n            \"id\":\"B062\",\n            \"name\":\"褐煤开采洗选\",\n            \"sortNo\":\"B062\",\n            \"parentId\":\"B06\"\n          },\n          {\n            \"id\":\"B069\",\n            \"name\":\"其他煤炭采选\",\n            \"sortNo\":\"B069\",\n            \"parentId\":\"B06\"\n          }\n        ]\n      }\n    ]\n  }\n]\n\n```\n###### 3.2 传递的Props:\n---------------------------------------\n\n|Props|Explain|type|require|default||\n|:-------|:--------|:--------|:-------|:----------|:-------|\n|data|数据，树结构数据|array|yes|[]|-|\n|onClick|点击时的事件，返回点击的节点和节点路径{ item, routes, currentNode }|function|no|no|currentNode为当前选中的节点|\n|onClickLeaf|点击叶子节点时的事件，返回点击的节点和节点路径{ item, routes, currentNode }|function|no|no|currentNode为当前选中的节点|\n|isOpen|是否默认打开所有的节点,优先级高于openIds，当true时忽略openIds|boolean|no|false|-|\n|openIds|指定默认打开的节点id|array|no|[]|-|\n|defaultSelectedId|指定默认选中的节点id|array|no|[]|-|\n|selectType|指定选择的类型|string|no|'single',可传递single/multiple|-|\n|leafCanBeSelected|指定只能够选择叶子节点|boolean|false|-|-|\n|isShowTreeId|指定是否显示节点id|boolean|no|false|-|\n|itemStyle|指定item项的样式,其中包含三个子项backgroudColor：背景的颜色, fontSize：字体大小, color：字体的颜色|css style|no|{}|-|\n|selectedItemStyle|指定点击按钮选中时的样式,其中包含三个子项backgroudColor：选中时的颜色, fontSize：选中时的字体大小, color：选中时字体的颜色|css style|no|{}|-|\n|treeNodeStyle|指定节点处的图标样式，包含两个属性openIcon，closeIcon,支持传icon和image类型|object|no|null|-|\n\n###### 3.3 本地运行\n在本地运行，首先得克隆该项目，使用下面命令进行克隆，[克隆地址](https://github.com/suwu150/react-native-tree-select)\n  先克隆该项目\n  ```\n  git clone https://github.com/suwu150/react-native-tree-select.git\n  ```\n  然后进入项目，cd example进入到演示项目，通过以下命令安装依赖\n  ```\n  npm install\n  ```\n  通过以下命令运行android项目\n  ```\n  npm run android \n\n  ```\n###### 3.4 组件简介\n能够按照数据结构进行展开树状结构，通常用来进行展示具有明显层级关系的数据结构\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuwu150%2Freact-native-tree-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuwu150%2Freact-native-tree-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuwu150%2Freact-native-tree-select/lists"}