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效果