1.3.0 • Published 6 years ago
react-native-tree v1.3.0
category: Components type: Data Display title: Tree
subtitle: 树形控件
何时使用
组织架构、分类、国家地区等等，都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
API
Tree props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| treeData | 创建树的数据 | TreeNode[] | [] |
| multiple | 支持点选多个节点（节点本身） | boolean | false |
| checkable | 节点前添加 Checkbox 复选框 | boolean | false |
| checkStrictly | 父子节点选中状态不再关联 | boolean | false |
| defaultExpandAll | 默认展开所有树节点 | boolean | false |
| defaultExpandRoot | 默认树根节点 | boolean | false |
| defaultExpandedKeys | 默认展开指定的树节点 | string[] | [] |
| expandedKeys | （受控）展开指定的树节点 | string[] | [] |
| defaultSelectedKeys | 默认选中的树节点 | string[] | [] |
| selectedKeys | （受控）选中的树节点（注意：checkable为true时，父子节点有关联，如果传入父节点key，则子节点自动选中 | string[] | [] |
| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |
| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node}) | - |
| showLine | 是否展示连接线 | boolean | false |
| expandIconSize | 展开收起图标大小 | number | 11 |
| iconSize | 复选框和文本前自定义图标大小 | number | 15 |
| treeStyle | 组件最外层由ScrollView包裹，请传入该组件的style | StyleSheet | { padding: 10,height: ScreenHeight - 90} |
| styles | 自定义组件的界面样式 | {key:StyleSheet} | defaultStyles |
| nodeStyle | 自定义树节点文本样式 | StyleSheet | null |
TreeNode props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 禁止选中 | boolean | false |
| label | 标题 | string|ReactNode | '---' |
| key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string | 内部计算出的节点位置 |
| icon | 文本前自定义图标 | string | null |
| children | 树节点的子节点 | TreeNode[] | null |
注意
树节点可以有很多，但在设置checkable时，将会花费更多的计算时间，因此我们缓存了一些计算结果（this.treeNodesStates）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：
使用
<Tree treeData={[]}/>