gpt4 book ai didi

javascript - SectionList 中的选项卡 React Native

转载 作者:行者123 更新时间:2023-12-03 14:29:54 26 4
gpt4 key购买 nike

我们可以添加像这个库一样的选项卡https://github.com/bogoslavskiy/react-native-tabs-section-list在部分列表中。我尝试了上面的库,它已经过时并且不起作用。谁能指导我如何在部分列表中将标题显示为选项卡。我阅读了React网站上Section List的官方文档,它官方没有这个功能。我找到了这个https://github.com/bogoslavskiy/react-native-tabs-section-list Github 上的库,但我认为它不适用于最新的博览会版本。我正在将 expo 36 用于我的 React Native 项目。

我的部分列表代码:

import React from 'react';
import {
StyleSheet,
Text,
View,
SafeAreaView,
SectionList,
} from 'react-native';
import Constants from 'expo-constants';

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'],
},
];

function Item({ title }) {
return (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
}

export default function App() {
return (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
/>
</SafeAreaView>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
marginHorizontal: 16,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
},
header: {
fontSize: 32,
},
title: {
fontSize: 24,
},
});

最佳答案

看到react-native-tabs-section-list示例,我认为它们更像是两个组件。

右边的组件是一个SectionList。顶部组件是一个 ScrollView,只有带有右侧组件部分标题标签的按钮。这些按钮的 onPress() 只是调用SectionList 的scrollToLocation() 以编程方式滚动到相应的部分。

您可以尝试一下,然后返回此处解释它是否有效,或者您已经解决了吗?

关于javascript - SectionList 中的选项卡 React Native,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60665667/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com