自定义"节列表"中某个节的项目的高度

Question

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

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

Answer 1

这与部分列表中或如果要使用平面列表相同，您可以在内部提供一个名为 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,
},
});*

希望对您有所帮助。