最近一個月看了下reactnative,感覺以后是個趨勢,一個人可以干兩個人的活了,只是有點卡.其他還好.感覺老玩家玩一周就可以上手,上手容易,精通就另外講.總體來說還是挺有意思的.
下面就一個多級列表+一行多項組件詳細(xì)講解下
像這樣的二級列表,對應(yīng)的數(shù)據(jù)結(jié)構(gòu)如下:
首先定義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
}),
拿到數(shù)據(jù)之后
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要如下設(shè)置,每行3個,按照屏幕寬度平分,代碼略
就可以實現(xiàn)android下LISTVIEW? 嵌套GRIDVIEW效果
