React native 如何在react native中使用ListView呈现节标题？

我正在查看文档，看到我需要实现

renderSectionHeader

，但是我还需要实现什么，以及如何准备数据来编码节信息？我在facebook文档中没有看到任何解释这一点的内容，而且我得到了一个错误

\u this.getSectionId不是一个函数

  ...
  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 }
        />

。。。
renderSectionHeader=（sectionData，sectionID）=>{
返回(
对sectionData做些什么？
);
};
...

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

// 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} />}
  />

//这就是数据源的外观
const ds=new ListView.DataSource({
行已更改：（r1，r2）=>r1！==r2，
节头更改：（s1，s2）=>s1！==s2，
getSectionData:（dataBlob，sectionId）=>dataBlob[sectionId]；，
getRowData:（dataBlob，sectionId，rowId）=>dataBlob[rowId]，
});
//这是你的州
此.state={
数据源：ds.cloneWithRowsAndSections（dataBlob、sectionIds、rowIds），
}; // sectionsIds和ROWID应该是dataBlob中的值，这样RN就知道哪些内容属于哪个部分
//这将是您的列表视图
}
RenderParator={（sectionId，rowId）=>}
renderSectionHeader={（sectionData）=>}
/>

不确定列表视图自创建以来是否进行了更改，但希望它能帮助您朝着正确的方向进行设置。

工作示例 这是我修改的一个工作示例

首先，您的

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
如何从这个dataBlob中提取节和行

var getSectionData=（dataBlob，sectionID）=>{
返回dataBlob[sectionID]；
}
var getRowData=（dataBlob，sectionID，rowID）=>{
返回dataBlob[sectionID+'：'+rowID]；
}

通过以上两种方法可以看出，您的
dataBlob
可以有不同的结构，您只需要更新这两种方法，让它知道如何访问它

现在我们将创建一个使用节的数据源

this.ds=new ListView.DataSource({
getSectionData:getSectionData，
getRowData:getRowData，
行已更改：（r1，r2）=>r1！==r2，
节头更改：（s1，s2）=>s1！==s2
})

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

var sectionIDs=['sectionID1'，'sectionID2']；
变量rowIDs=['rowID1'，'rowID2']，['rowID1'，'rowID2']；

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

this.state={
数据源：this.ds.cloneWithRowsAndSections（dataBlob、sectionId、rowIDs）
}

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

{
返回{rowData.name}
}} 
renderSectionHeader={（sectionData，sectionID）=>{
返回{sectionData.name}
}}
/>

那会让你开始的。我希望这有帮助
 作为旁注，我切换到了
SectionList
，它更易于使用。它比
列表视图
性能更好，因为它使用了
平面列表
，而平面列表不使用
数据源
。我不确定您什么时候想使用
ListView
而不是
SectionList
，但是如果您可以使用
SectionList
，我强烈推荐您使用它。