React native ListView中的renderSectionHeader

我不熟悉React Native，我想知道是否有比使用

Object.keys（Object.keys（this.props.sectionData））

在子元素上显示标题文本更干净的方法

// Parent

import React, { Component } from 'react';
import { ListView } from 'react-native';
import OccurrenceDetail from './OccurrenceDetail';
import ListSection from './ListSection';

export default class OccurrenceList extends Component {
  constructor() {
    super();
    const dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2
    });
    this.state = {
      dataSource: dataSource.cloneWithRowsAndSections([
        { 'Monday':
          [
            {
              startTime: '2012-04-23T18:25:00.000Z',
              endTime: '2012-04-23T19:25:00.000Z',
              customerName: 'Tim Smith',
              address: '68 Hall St, Bondi Beach'
            },
            {
              startTime: '2012-04-23T18:25:00.000Z',
              endTime: '2012-04-23T19:25:00.000Z',
              customerName: 'Tim Smith',
              address: '68 Hall St, Bondi Beach'
            }
          ]
        },
        { 'Tuesday':
          [
            {
              startTime: '2012-04-23T18:25:00.000Z',
              endTime: '2012-04-23T19:25:00.000Z',
              customerName: 'Tim Smith',
              address: '68 Hall St, Bondi Beach'
            },
            {
              startTime: '2012-04-23T18:25:00.000Z',
              endTime: '2012-04-23T19:25:00.000Z',
              customerName: 'Tim Smith',
              address: '68 Hall St, Bondi Beach'
            }
          ]
        }
      ])
    };
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        style={styles.container}
        renderRow={(rowData) => <OccurrenceDetail occurrence={rowData} />}
        renderSectionHeader={(sectionData, sectionID) => <ListSection sectionData={sectionData} sectionID={sectionID} />}
      />
    );
  }
}

// Child

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class ListSection extends Component {
  render() {
    return (
      <View>
        <Text key={this.props.sectionID}>{Object.keys(this.props.sectionData)}</Text>
      </View>
    );
  }
}

//父对象
从“React”导入React，{Component}；
从“react native”导入{ListView}；
从“/OccurrenceDetail”导入OccurrenceDetail；
从“/ListSection”导入ListSection；
导出默认类发生列表扩展组件{
构造函数（）{
超级（）；
const dataSource=new ListView.dataSource({
行已更改：（r1，r2）=>r1！==r2，
节头更改：（s1，s2）=>s1！==s2
});
此.state={
数据源：dataSource.cloneWithRowsAndSections([
{“星期一”：
[
{
开始时间：“2012-04-23T18:25:00.000Z”，
结束时间：“2012-04-23T19:25:00.000Z”，
客户名称：“Tim Smith”，
地址：“邦迪海滩霍尔街68号”
},
{
开始时间：“2012-04-23T18:25:00.000Z”，
结束时间：“2012-04-23T19:25:00.000Z”，
客户名称：“Tim Smith”，
地址：“邦迪海滩霍尔街68号”
}
]
},
{“星期二”：
[
{
开始时间：“2012-04-23T18:25:00.000Z”，
结束时间：“2012-04-23T19:25:00.000Z”，
客户名称：“Tim Smith”，
地址：“邦迪海滩霍尔街68号”
},
{
开始时间：“2012-04-23T18:25:00.000Z”，
结束时间：“2012-04-23T19:25:00.000Z”，
客户名称：“Tim Smith”，
地址：“邦迪海滩霍尔街68号”
}
]
}
])
};
}
render（）{
返回(
}
renderSectionHeader={（sectionData，sectionID）=>}
/>
);
}
}
//孩子
从“React”导入React，{Component}；
从“react native”导入{View，Text}；
导出默认类ListSection扩展组件{
render（）{
返回(
{Object.keys（this.props.sectionData）}
);
}
}

虽然它也在做同样的事情，但在“更干净”方面，我发现ListView填充对简化数据格式非常有帮助。我最终得到了一个构造函数：

constructor(props) {
    super(props);
    const getSectionData = (dataBlob, sectionId) => dataBlob[sectionId];
    const getRowData = (dataBlob, sectionId, rowId) => dataBlob[`${rowId}`];
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged : (s1, s2) => s1 !== s2,
      getSectionData,
      getRowData,
    });
    const { dataBlob, sectionIds, rowIds } = this.formatData(this.props.data);

    this.state = {
        dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds, rowIds),
    };
}

然后是一个formatData（）函数，直接取自该教程：

formatData(data) {
    const headings = 'Heading 1*Heading 2*Heading 3*...'.split('*');
    const keys = 'key 1*key 2*key 3*...'.split('*');
    const dataBlob = {};
    const sectionIds = [];
    const rowIds = [];
    for (let sectionId = 0; sectionId < headings.length; sectionId++) {
        const currentHead = headings[sectionId];
        const currentKey = keys[sectionId];
        const collection = data.filter((theData) => theData.type == currentKey);
        if (collection.length > 0) {
            sectionIds.push(sectionId);
            dataBlob[sectionId] = { sectionTitle: currentHead };
            rowIds.push([]);
            for (let i = 0; i < collection.length; i++) {
                const rowId = `${sectionId}:${i}`;
                rowIds[rowIds.length - 1].push(rowId);
                dataBlob[rowId] = collection[i];
            }
        }
    }
    return { dataBlob, sectionIds, rowIds };
  }

formatData（数据）{
常量标题='标题1*标题2*标题3*..'。拆分（'*'）；
常量键='键1*键2*键3*..'。拆分（'*'）；
constdatablob={}；
const sectionIds=[]；
常量rowIds=[]；
对于（让sectionId=0；sectionIdtheData.type==currentKey）；
如果（collection.length>0）{
sectionId.push（sectionId）；
dataBlob[sectionId]={sectionTitle:currentHead}；
rowIds.push（[]）；
for（设i=0；i

我将我的数据对象放在一个外部文件中，要么导入它，要么将它作为“道具”发送进来，如上所述。希望有帮助

编辑：在再次阅读您的问题后，您似乎更关心文本子对象如何引用数据…因此我不确定上述方法是否有帮助。我的ListView的结果是：

<View style={styles.container} >
     <ListView  showsVerticalScrollIndicator ={false}
                contentContainerStyle={ styles.listview }
                dataSource={this.state.dataSource}
                renderRow={(rowData) =>
                    <View>
                        <TouchableHighlight onPress={() => this.props.onItemSelected(rowData)}
                                            style={[styles.launcher]}>
                            <Text style={ styles.launcher_text }>{rowData.title}</Text>
                        </TouchableHighlight>
                    </View>
                }
                renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
                renderSectionHeader={(sectionData) => <MenuSectionHeader {...sectionData}
                 />}
     />
</View>

this.props.onItemSelected（rowData）}
style={[style.launcher]}>
{rowData.title}
}
RenderParator={（sectionId，rowId）=>}
renderSectionHeader={（sectionData）=>}
/>

祝你好运