React Native:从renderItem获取标头的SectionList

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

const sections = [
  {title: 'Fruits', data: ['Apple', 'Banana', 'Cherry']},
  {title: 'Vegetables', data: ['Carrot', 'Eggplant', 'Zucchini']},
];

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

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

const App = () => (
  <SectionList
    sections={sections}
    renderItem={renderItem}
    renderSectionHeader={renderSectionHeader}
    keyExtractor={(item, index) => item + index}
  />
);

const styles = StyleSheet.create({
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: '#f0f0f0',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

export default App;