英文:
How to set header in Alphabetic way in react native?
问题
# **输出**
[](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;
我的数据已经排序，我想要这样：如果数据以字母A开头，那么这些数据应该包含在A标题部分中；如果数据以字母B开头，那么这些数据应该包含在B标题部分中。
就像这样，D标题只包含以D开头的数据，C标题只包含以C开头的数据。
但我不知道如何设置标题以及如何将数据放入标题部分。
简而言之，我想要的效果如下所示：
有人能给我一个解决方案吗？
谢谢！🎊
<details>
<summary>英文:</summary>
# **output**
[](https://i.stack.imgur.com/0PkVA.jpg)
# **code**
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;
**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
[](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;
英文:
Method 1
Try this package react-native-section-alphabet-list
A simple React Native component that takes an array of data and renders a SectionList with alphabetically (or custom) sorted data.
Method 2
Update your code like below and try
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;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论