ListView中的renderSectionHeader

Question

我是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>
    );
  }
}

Answer 1

虽然它正在做同样的事情，但就“清洁”而言，我发现ListView上的this tutorial非常有助于简化我的数据格式化。我最终得到了一个构造函数：

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

我将我的数据对象放在外部文件中，然后将其导入或将其作为“props”发送，如上所述。希望有所帮助！

编辑：再次阅读你的问题之后，你似乎更关心的是文本孩子如何引用数据...所以我不确定上面的帮助与否。我的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>

祝你好运！