SectionList中的Tabs React Native

Question

我们能不能像这个库一样添加标签 https:/github.comogoslavskiyreact-native-tabs-section-list。 在SectionList中。我试过上面的库，它已经过时了，不能用了。有谁能指导我如何才能在Section List中以标签形式显示标题。我看了React网站上Section List的官方文档，官方没有这个功能。我找到了这个 https:/github.comogoslavskiyreact-native-tabs-section-list。 Github上的库，但我认为它不能与最新的expo版本一起工作。我的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,
  },
});

Answer 1

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

右边的组件是一个SectionList。上面的组件是一个ScrollView，上面的按钮是右边组件的章节标题标签。这些按钮的onPress()只是调用SectionList的scrollToLocation()来程序化地滚动到相应的章节。

你可以尝试一下，然后回到这里解释一下，如果能成功，还是你已经解决了？