如何在react native中使用ListView呈现节标头

Question

我正在查看文档，发现我需要实现renderSectionHeader，但我还需要实现什么，以及如何准备数据来编码节信息？我在facebook文档中没有看到任何解释，我收到了一个错误_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 }
/>

Answer 1

章节标题需要更多的工作，但我会尝试涵盖所有内容：

// This is how your datasource should look
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged : (s1, s2) => s1 !== s2,
getSectionData: (dataBlob, sectionId) => dataBlob[sectionId];,
getRowData: (dataBlob, sectionId, rowId) => dataBlob[rowId],
});
// This is your state
this.state = {
dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds, rowIds),
}; // sectionsIds and rowIds should be values in your dataBlob so RN knows what belongs in which section
// And this will be your listview
<ListView
style={styles.container}
dataSource={this.state.dataSource}
renderRow={(data) => <Row {...data} />}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
renderSectionHeader={(sectionData) => <SectionHeader {...sectionData} />}
/>

不确定自这之后是否对列表视图进行了更改，但希望它能帮助你朝着正确的方向前进。

Answer 2

工作示例

这是我从这篇优秀的帖子中修改的一个工作样本。

首先，您的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' },
}

无论你有什么数据都必须被操纵。它看起来不一定是这样的，但对于这个例子，这就是我们要告诉ListView的期望。

现在我们需要告诉ListView如何从这个dataBlob中提取部分和行。

var getSectionData = (dataBlob, sectionID) => {
return dataBlob[sectionID];
}
var getRowData = (dataBlob, sectionID, rowID) => {
return dataBlob[sectionID + ':' + rowID];
}

你可以通过上面的两种方法来判断你的dataBlob可以有不同的结构，你只需要更新这两种方法，让它知道如何访问它

现在我们将创建一个使用节的dataSource。

this.ds = new ListView.DataSource({
getSectionData: getSectionData,
getRowData: getRowData,
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
})

这部分在我看来是多余的，但却是必需的。您必须在单独的数组中列出节ID和行ID。

var sectionIDs = [ 'sectionID1', 'sectionID2' ];
var rowIDs = [ [ 'rowID1', 'rowID2' ], [ 'rowID1', 'rowID2' ] ];

现在你需要用数据更新状态来源：

this.state = {
dataSource: this.ds.cloneWithRowsAndSections( dataBlob, sectionIDs, rowIDs )
}

最后，您需要在ListView中显示它。

<ListView
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID) => {
return <Text>{rowData.name}</Text>
}} 
renderSectionHeader={ (sectionData, sectionID) => {
return <Text>{sectionData.name}</Text>
}}
/>

这会让你开始的。我希望这能有所帮助。