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

工作示例

这是我从this excellent post修改的工作示例。

首先，您的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可以使用不同的结构，只需更新这两种方法即可让它知道如何访问它。

现在我们将创建一个使用部分的数据源。

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' ] ];

现在需要使用dataSource更新状态：

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

那会让你开始。我希望有所帮助。

如何在反应原生中使用ListView呈现节标题？

2 个答案:

工作示例