React Native Section Headers

Question

我正在尝试在listview中使用节标题。我的数据如下：

[
  {name: 'ShouldBeSection1', locations: [{id: 2121, name: "School"}, {id: 4545, name: "Los Angeles"}]},
  {name: 'ShouldBeSection2', locations: [{id: 4545, name: "Work"}, {id: 4545, name: "New York"}, {id: 4545, name: "Sports"}]},
  {name: 'ShouldBeSection3', locations: [{id: 8786, name: "University"}]},
]

名称应该显然是我的节标题，位置是节下面的行数据。任何提示？ ：d

Answer 1

您必须转换传入的数据以匹配react native

所需的格式

从文档中，列表视图数据的格式为

 { sectionID_1: [ <rowData1>, <rowData2>, ... ], ... }

所以你应该写一个为你做转换的方法。

getListData(data) {
  var rowAndSectionData = {

  };
  data.forEach(function(rowData){

     rowAndSectionData[rowData.name] = rowData.locations;

  });

  return rowAndSectionData;

}

现在使用返回的值作为源而不是原始数据。

Answer 2

我尝试它并且它有效。我希望你没事。

                import React from 'react';
                import {Table, Column, Cell} from 'fixed-data-table';

                class MyTable extends React.Component {

                  constructor(props) {
                    super(props);
                    this.state = {
                      rows : [
          {name: 'ShouldBeSection1', locations: [{id: 2121, name: "School"}, {id: 4545, name: "Los Angeles"}]},
          {name: 'ShouldBeSection2', locations: [{id: 4545, name: "Work"}, {id: 4545, name: "New York"}, {id: 4545, name: "Sports"}]},
          {name: 'ShouldBeSection3', locations: [{id: 8786, name: "University"}]}]  };
          }

                  render() {
                      return <Table
                        height={40+((this.state.rows.length+1) * 30)}
                        width={1150}
                        rowsCount={this.state.rows.length}
                        rowHeight={30}
                        headerHeight={30}
                        rowGetter={function(rowIndex) {return this.state.rows[rowIndex]; }.bind(this)}>
                        <Column dataKey="name" width={50} label="Name" />
                        <Column dataKey="locations[0].name" width={200} label="First Location" />
                        <Column dataKey="locations[1].name" width={200} label="Second Location" />
                        <Column dataKey="locations[2].name" width={200} label="Second Location" />

                      </Table>;
                  }
                }

                module.exports = MyTable;