React Native中如何为已排序数据设置字母分组列表头部？

import React from 'react';
import {
  Text,
  View,
  FlatList,
  ScrollView,
  SafeAreaView
} from 'react-native';

import { nameData } from './dummydata';

const windowSize = FlatList.length > 50 ? FlatList.length / 4 : 21;

const Main = () => {
  return (
    <View style={{}}>
      <SafeAreaView style={{}}>
        <ScrollView style={{}}>

          <FlatList
            disableVirtualization={true}
            //data={nameData.sort((a, b) => a.name.localeCompare(b.name))}
            data={nameData.sort(function (a, b) {
              return (a.name < b.name) ? -1 : (a.name > b.name) ? 1 : 0;
            })}
            renderItem={({ item }) => (
              <Text style={{ fontSize: 20,marginLeft:10,padding:5 }}>{item.name}</Text>
            )}
        
            getItemLayout={(data, index) => ({
            length: 80,
            offset: 80 * index,
            index,
            })}
            removeClippedSubviews={true}
            maxToRenderPerBatch={windowSize}
            windowSize={windowSize}
            numColumns={1}
            keyExtractor={(item, index) => String(index)}
            contentContainerStyle={{ paddingBottom: 10 }}
          />

        </ScrollView>
      </SafeAreaView>
    </View>
  );
};

export default Main;

以上是我提供的代码

我的数据已完成排序，希望将以字母A开头的数据归类到A头部区域下，以字母B开头的数据归类到B头部区域下，以此类推，例如D头部仅包含以D开头的数据，C头部仅包含以C开头的数据。但我不知道如何设置头部以及如何将数据对应到相应的头部区域，最终想要实现如图所示的分组数据效果。

恳请各位提供解决方案？

谢谢！🐼

内容的提问来源于stack exchange，提问作者user19534405