时间戳

首页 > 解决方案 > 自定义 SectionList 中某个部分上项目的高度

react-native - 自定义 SectionList 中某个部分上项目的高度

问题描述

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

参考各种博客，我在 GitHub ' https://github.com/jsoendermann/rn-section-list-get-item-layout '中看到了一个包。谁能建议我实现这些功能的标准方法是什么？似乎该软件包是 2 年前最后一次更新的，所以我不喜欢它并寻找标准解决方案。提前致谢。

标签： react-nativereact-native-sectionlist

解决方案

这与节列表中的相同，或者如果您想使用平面列表，则在其中提供一个名为 renderItem 的道具，并在其中提供自定义组件。因此，当您为任何自定义组件进行样式设置时，它是相同的。检查下面，我添加了内部功能Item作为styles.item样式并在那里添加了 80 的高度，你可以到处玩。检查链接示例：

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

希望能帮助到你。

推荐阅读