最近一个月看了下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效果
