SectionList React Native 中的选项卡

Posted 2023-02-16

【中文标题】SectionList React Native 中的选项卡

【英文标题】：Tabs in SectionList React Native

【发布时间】：2020-06-25 04:28:30

【问题描述】：

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

我的部分列表代码：

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,
  ,
);

【问题讨论】：

我也需要这方面的帮助吗？任何机构都有可行的解决方案

你查看过他们的代码吗？它真的很短（基本上是2个文件）。您可以分叉该 repo 并修复版本控制的任何问题（稍后您仍然需要归功于它们，但许可证是 MIT ，所以没什么大不了的）。如果你反对，我可以给你一些关于如何自己实现它的指导。告诉我。

是的，请指导如何实现这个......

不能指导我吗？

【参考方案1】：

看到 react-native-tabs-section-list 的例子，我觉得它们更像是两个组件。

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

您可以尝试一下，然后回到这里解释它是否有效，或者您已经解决了吗？