React Native中树 TreeView 实现（1）
2024-09-20 20:54:42
背景：
基于项目需要，在搜索第三方类库后没有很好的效果后决定动手实现。
开发环境：
React Native 0.44
模型：
由于数据已经全部取出，不需要分级异步加载，故而只需要实现层级展示即可。
设计：
从以上模型可以分布解析：
首先输入部分需要规划需要哪些东西输入，最基本的可以确定是源数据（data），另外根据初始化的状态，我们还可以确定需要在展示时，节点是否被选中（selectedItems）或者是否是展开关闭等等。
因此可以定义组件属性如下：
export default class TreeView extends Component {
static propTypes = {
data: PropTypes.array,
selectedItems: PropTypes.array,
};
static defaultProps = {
data: [],
selectedItems: [],
};
}
组件处理部分，需要提供对外的接口回调处理，包括一些状态的改变、事件的处理等等：
基于此，可以扩展默认属性定义（默认主键采用UUID生成）：
static propTypes = {
data: PropTypes.array,
selectedItems: PropTypes.array,
onItemClick: PropTypes.func,
onItemSelect: PropTypes.func,
onItemExpand: PropTypes.func,
onGetItemDisplayText: PropTypes.func,
onGetItemKey: PropTypes.func,
onGetSubList: PropTypes.func,
collapsableComponent: PropTypes.func,
itemComponent: PropTypes.func,
};
static defaultProps = {
data: [],
selectedItems: [],
onItemClick: (levelIndex, index, item) => {
},
onItemSelect: (checked, item) => {
},
onItemExpand: (levelIndex, index, item) => {
},
onGetItemDisplayText: (item) => {
return item;
},
onGetSubList: (item) => {
return item.list || [];
},
onGetItemKey: (item) => {
return uuidv4();
},
collapsableComponent: (item, open, hasSubList) => {
if (!hasSubList) {
return (<Text>{}</Text>);
}
return (<Text>{open ? '-' : '+'}</Text>);
},
itemComponent: (item) => {
return (<Text style={{flex: 1, marginHorizontal: 10,}}>{item.text}</Text>);
},
};
综合上述两步铺垫之后，剩下的展示工作就比较好办了。
最新文章
- 使用sp_xml_preparedocument处理XML文档
- 了解了这些才能开始发挥jQuery的威力(转)
- 第二百四十二天 how can I 坚持
- 用DOM实现文章采集-HtmlAgilityPack实现html解析
- 状压dp Codeforces Beta Round #8 C
- Search an Element in an array
- crack the coding interview
- 关于快速沃尔什变换(FWT)的一点学习和思考
- PAT1084:Broken Keyboard
- Module(CP343-1)Advanced system error SDB generation Error in rule file or rule file not found
- Ubuntu16.04更新源
- 删除Myeclipse中废弃的workspace记录
- ArcGIS三种方式打断相交线------Planarize Lines工具
- pthread_cond_wait和pthread_cond_signal以及互斥变量的使用情况
- [EntityFramework] 对 DateTime 类型使用 SQL 服务器时间或者字段默认值
- 3 Sum leetcode java
- android 模拟器无法启动问题
- Android踩坑随笔Fragment中onActivityResult方法不被调用
- 基于Geomesa服务查询轨迹数据无法根据空间和时间范围进行结果查询
- python切片详解