ListView中的renderSectionHeader

import React from 'react';
import { ListView } from 'react-native';

const data = [
  { section: 'A', data: ['Apple', 'Apricot', 'Avocado'] },
  { section: 'B', data: ['Banana', 'Blueberry', 'Blackberry'] },
  { section: 'C', data: ['Cherry', 'Coconut', 'Cranberry'] },
];

const renderSectionHeader = ({ section }) => (
  <View style={styles.sectionHeader}>
    <Text style={styles.sectionHeaderText}>{section}</Text>
  </View>
);

const renderItem = ({ item }) => (
  <View style={styles.item}>
    <Text>{item}</Text>
  </View>
);

const MyListView = () => {
  const dataSource = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2,
    sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
  }).cloneWithRowsAndSections(data);

  return (
    <ListView
      dataSource={dataSource}
      renderSectionHeader={renderSectionHeader}
      renderRow={renderItem}
    />
  );
};

export default MyListView;