SectionList ReactNative上的粘性标头

Question

我需要创建一个屏幕目录(类别和产品(。我使用React Native的SectionList来实现这一点。

当你滚动产品列表时，我需要让Categories组件保持在顶部。有什么库可以帮助我使用这个目录屏幕吗？请看这里的图片。。

import React from "react";
import { View, StyleSheet, SectionList } from "react-native";
import Text from "../Text";
const DATA = [
{
title: "Main dishes",
data: ["Pizza", "Burger", "Risotto"],
},
{
title: "Sides",
data: ["French Fries", "Onion Rings", "Fried Shrimps"],
},
{
title: "Drinks",
data: ["Water", "Coke", "Beer"],
},
{
title: "Desserts",
data: ["Cheese Cake", "Ice Cream"],
},
];
const TabCategories = () => (
<View>
<Text>Horizontal list of categories</Text>
</View>
);
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const TestSectionList = (props) => {
return (
<View style={styles.container}>
<Text style={styles.SRC}>Some React Component</Text>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
StickyHeaderComponent={TabCategories}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {},
SRC: {
fontWeight: "bold",
borderWidth: 1,
borderColor: "#fff",
padding: 10,
},
item: {
padding: 30,
},
header: {
fontWeight: "bold",
fontSize: 20,
},
});
export default TestSectionList;

Answer 1

stickySectionHeadersEnabled使部分标题粘在屏幕顶部，直到下一个标题将其向上推

ListHeaderComponent在列表的最开始处呈现

renderSectionHeader在每个剖面的顶部渲染

我认为应该这样做：

<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
ListHeaderComponent={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
renderSectionHeader={TabCategories}
stickySectionHeadersEnabled
/>

Answer 2

您可以尝试这个库react-native-tabs-section-list

https://github.com/bogoslavskiy/react-native-tabs-section-list

Answer 3

如果你谈论的是react原生部分列表，它继承了ScrollView道具，你可以在道具部分的文档中查看，所以它有stickyHeaderComponent道具，这应该正是你想要的。