I'm looking at the documentation and see that I need to implement renderSectionHeader but what else do I need to implement and how do I prepare the data to encode the section information? I don't see anything in the facebook documentation that explains that and I'm getting an error _this.getSectionId is not a function
...
renderSectionHeader = (sectionData, sectionID) => {
return (
<Divider styleName="section-header">
<Caption>DO SOMETHING WITH sectionData?</Caption>
</Divider>
);
};
...
<ListView
data = { results }
autoHideHeader = { true }
loading = { isLoading }
renderHeader = { this.renderHeader }
onRefresh = { data.refetch }
renderSectionHeader={ this.renderSectionHeader }
renderRow={ this.renderRow }
/>
Here's a working sample that I've modified from this excellent post.
First of all, your dataBlob:
var dataBlob = {
'sectionID1' : { name: 'section1' },
'sectionID1:rowID1' : { name: 'section1row1' },
'sectionID1:rowID2' : { name: 'section1row2' },
'sectionID2' : { name: 'section2' },
'sectionID2:rowID1' : { name: 'section2row1' },
'sectionID2:rowID2' : { name: 'section2row2' },
}
Whatever data that you have will have to be manipulated. It doesn't have to look exactly like this but for this example, this is what we're going to tell the ListView to expect.
Now we need to tell ListView how to extract the sections and the rows from this dataBlob.
var getSectionData = (dataBlob, sectionID) => {
return dataBlob[sectionID];
}
var getRowData = (dataBlob, sectionID, rowID) => {
return dataBlob[sectionID + ':' + rowID];
}
You can tell by the two methods above that you can have a different structure to your dataBlob, you just need to update these two methods to let it know how to access it.
Now we'll create a dataSource that uses sections.
this.ds = new ListView.DataSource({
getSectionData: getSectionData,
getRowData: getRowData,
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
})
This part seems redundant to me but is required. You have to list out the section ids and the row ids in separate arrays.
var sectionIDs = [ 'sectionID1', 'sectionID2' ];
var rowIDs = [ [ 'rowID1', 'rowID2' ], [ 'rowID1', 'rowID2' ] ];
Now you need to update the state with the dataSource:
this.state = {
dataSource: this.ds.cloneWithRowsAndSections( dataBlob, sectionIDs, rowIDs )
}
And, finally, you need to display it in your ListView.
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID) => {
return <Text>{rowData.name}</Text>
}}
renderSectionHeader={ (sectionData, sectionID) => {
return <Text>{sectionData.name}</Text>
}}
/>
That'll get you started. I hope that helps.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments