React native 自定义截面列表中截面上项目的高度

作为学习react native的一部分，我正在尝试各种功能，如原生iOS TableView或CollectionView或android应用程序RecycleView。我已经用SectionList和FlatList实现了一个示例屏幕，现在我想为SectionList中的项目或部分提供不同的高度

---

参考各种博客，我看到了GitHub中提供的一个包。谁能告诉我实现这些功能的标准方法是什么？看来该软件包最近一次更新是在两年前，所以我不喜欢它，而是在寻找标准的解决方案。提前谢谢

这与“部分列表”中的相同，或者如果要使用平面列表，则在该列表中提供名为renderItem的道具，在该列表中提供自定义组件。因此，在为任何自定义组件进行样式设置时，都是一样的。检查下面，在功能项中，我添加了样式。项目作为样式，并在那里添加了80的高度，您可以到处玩。检查链接：

---

希望有帮助。

你好，高拉夫。谢谢你的快速回复。这将是有益的，但我想澄清另一种情况。Eg：考虑2个部分，第一部分有一个项目，它的高度将是屏幕尺寸的40%。第二部分中的项目可以是静态的。在这种情况下，如何指定高度？谢谢你。很抱歉，你不知道，你到底想要什么。考虑一个分段表，它应该有2个部分。第1节有一个项目，另一节有10个项目。第一部分中的项目将占据屏幕大小的40%这样的高度。如果高度是静态的，那么我可以在项目样式中指定。是否不清楚？是的，如果高度是特定的，并且您知道高度，那么只需将样式应用于该组件，对于其他组件，则应用样式，例如假设第1节中的renderItem的eheight为80，第2节中的height为20

*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,
    height:80
  },
  header: {
    fontSize: 32,
    margin:50
  },
  title: {
    fontSize: 24,
  },
});*