React Native中树 TreeView 实现（1）

背景：

基于项目需要，在搜索第三方类库后没有很好的效果后决定动手实现。

 

开发环境：

React Native 0.44

 

模型：

由于数据已经全部取出，不需要分级异步加载，故而只需要实现层级展示即可。

 

 

设计：

从以上模型可以分布解析：

首先输入部分需要规划需要哪些东西输入，最基本的可以确定是源数据（data），另外根据初始化的状态，我们还可以确定需要在展示时，节点是否被选中（selectedItems）或者是否是展开关闭等等。

 

 

因此可以定义组件属性如下：

export default class TreeView extends Component {  2     static propTypes = {  3  data: PropTypes.array,  4  selectedItems: PropTypes.array,  5  };  6 
    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>);
        },
    };

　　

综合上述两步铺垫之后，剩下的展示工作就比较好办了。