背景:
基于项目需要,在搜索第三方类库后没有很好的效果后决定动手实现。
开发环境:
React Native 0.44
模型:
由于数据已经全部取出,不需要分级异步加载,故而只需要实现层级展示即可。
设计:
从以上模型可以分布解析:
首先输入部分需要规划需要哪些东西输入,最基本的可以确定是源数据(data),另外根据初始化的状态,我们还可以确定需要在展示时,节点是否被选中(selectedItems)或者是否是展开关闭等等。
因此可以定义组件属性如下:
1 export default class TreeView extends Component {
2 static propTypes = {
3 data: PropTypes.array,
4 selectedItems: PropTypes.array,
5 };
6
7 static defaultProps = {
8 data: [],
9 selectedItems: [],
10 };
11 }
组件处理部分,需要提供对外的接口回调处理,包括一些状态的改变、事件的处理等等:
基于此,可以扩展默认属性定义(默认主键采用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>);
},
};
综合上述两步铺垫之后,剩下的展示工作就比较好办了。