# **输出**
[![在这里输入图片描述](https://i.stack.imgur.com/0PkVA.jpg)](https://i.stack.imgur.com/0PkVA.jpg)
# **代码**
```jsx
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;

<details>
<summary>英文:</summary>
# **output**
[![enter image description here](https://i.stack.imgur.com/0PkVA.jpg)](https://i.stack.imgur.com/0PkVA.jpg)
# **code**

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

**I have given the code above**
my data is sorted , I want like this if data is started A alphabet then this data contain in A header section if data is started B alphabet then this data contain in B header section.
like this D header contain only D Starting data C header contain only C Starting data
but I don't know how to set header and how to  set data in header section.
in sort I want like this data
[![enter image description here](https://i.stack.imgur.com/X8nvK.png)](https://i.stack.imgur.com/X8nvK.png)
anybody can give me solution?
**thank you!🐼**
</details>
# 答案1
**得分**: 0
**方法1**
尝试使用这个包 [react-native-section-alphabet-list][1]。
一个简单的React Native组件，它接受一个数据数组并以字母顺序（或自定义顺序）渲染一个SectionList。
**方法2**
更新您的代码如下并尝试：
```javascript
import React, { useEffect, useState } from "react";
import { Text, View, FlatList, SafeAreaView } from "react-native";
import { nameData } from "./duumydata";
const windowSize = FlatList.length > 50 ? FlatList.length / 4 : 21;
const Main = () => {
  let listData = new Array(26).fill([]);
  const headerArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
  const [data, setData] = useState([]);
  useEffect(() => {
    nameData.sort(function (a, b) {
      return a.name.toUpperCase() < b.name.toUpperCase()
        ? -1
        : a.name > b.name
        ? 1
        : 0;
    });
    headerArray.forEach((header, index) => {
      nameData.forEach((item) => {
        const headerText = item.name.split("")[0].toUpperCase();
        if (header == headerText) {
          listData[index] = [...listData[index], item];
        }
      });
    });
    setData(listData);
  }, []);
  const renderItem = ({ item, index }) => {
    return (
      <>
        <View style={{ backgroundColor: "grey" }}>
          <Text>{headerArray[index]}</Text>
        </View>
        {item?.map((obj) => renderName(obj))}
      </>
    );
  };
  const renderName = (item) => {
    return (
      <View>
        <Text>{item.name}</Text>
      </View>
    );
  };
  return (
    <View style={{}}>
      <SafeAreaView style={{}}>
        <FlatList
          disableVirtualization={true}
          data={data}
          renderItem={(item) => renderItem(item)}
          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 }}
        />
      </SafeAreaView>
    </View>
  );
};
export default Main;