我需要创建一个屏幕目录(类别和产品)。 我正在使用 React Native 的 SectionList 来实现这一点。
当您滚动产品列表时,我需要使该类别组件保持在顶部。 是否有任何图书馆可以帮助我处理此目录屏幕? Please look at the image here..
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;
最佳答案
stickySectionHeadersEnabled
使节标题粘在屏幕顶部,直到下一个将其向上推
ListHeaderComponent
在列表的最开头呈现
renderSectionHeader
呈现在每个SECTION的顶部
我认为应该这样做:
<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
/>
关于react-native - SectionList React Native 上的粘性 header ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68049680/
相关文章:
delphi - Spring4D TDistinctIterator
flutter - flutter中的flutter build bundle和appbundle有
flutter - Flutter 中 colorScheme 和 ThemeData 声明的原色
xcode - SwiftUI - 如何访问 "WindowScene"
json - 名为 "id"的所有键的输出路径,其中值的类型为 "string"
reactjs - 难以创建基本线(@react-three/fiber 和 Typescript)