native react 二级菜单_React Native 跨平台多级列表开发

最近一个月看了下reactnative,感觉以后是个趋势,一个人可以干两个人的活了,只是有点卡.其他还好.感觉老玩家玩一周就可以上手,上手容易,精通就另外讲.总体来说还是挺有意思的.下面就一个多级列表+一行多项组件详细讲解下

像这样的二级列表,对应的数据结构如下:

首先定义datasource:

vargetSectionData= (dataBlob,sectionID)=>{

returndataBlob[sectionID];

};

vargetRowData= (dataBlob,sectionID,rowID)=>{

returndataBlob[sectionID+":"+rowID];

};

this.state= {

dataSource:newListView.DataSource({

getSectionData:getSectionData,

getRowData:getRowData,

sectionHeaderHasChanged:(s1,s2)=>s1!==s2,

rowHasChanged:(r1,r2)=>r1!==r2

}),

拿到数据之后

varjsonData=response.data.seconde_type_list;

//    定义变量

vardataBlob= {},

sectionIDs= [],

rowIDs= [];

for(vari=0;i

sectionIDs.push(i);

dataBlob[i] =jsonData[i].product_type_name;

rowIDs[i] = [];

varchilds=jsonData[i].child_type;

for(varj=0;j

rowIDs[i].push(j);

dataBlob[i+':'+j] =childs[j];

}

}

vards=this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)

this.setState({dataSource:ds});

渲染

render() {

// const name = this.props.name;

return(

showText={this.state.name}

tag={'mdzz'}

onClick={this._onBack}/>

dataSource={this.state.dataSource}

renderRow={this.renderRow.bind(this)}

contentContainerStyle={styles.listViewStyle}

renderSectionHeader={this.renderSectionHeader}

/>

);

}

渲染每行

renderRow(rowData) {

return(

{/**/}

{rowData.product_type_name}

);

}

渲染listview 头部

renderSectionHeader(sectionData,sectionId) {

return(

{sectionData}

);

}

注意listview头部的style要如下设置,每行3个,按照屏幕宽度平分,代码略

就可以实现android下LISTVIEW  嵌套GRIDVIEW效果