FlatList inside SectionList

Question

我有3个不同列表的屏幕，所有列表都有一些自定义页眉/页脚和列表包含大量的数据，所以我的问题是-是否有任何性能问题与FlatList内部的SectionList?

这是我想做的一个粗略的例子

const App = () => {
const renderItem = ({item, section, index}) => {
switch (section.type) {
case 'LIST_1':
return (
<View>
<Text>Some custom set of components</Text>
<FlatList
data={section.items}
renderItem={({item}) => (
<View
style={{
padding: 20,
margin: 10,
backgroundColor: 'blue',
}}>
<Text>{item.title}</Text>
</View>
)}
keyExtractor={item => item.id}
/>
</View>
);
case 'LIST_2':
return (
<View>
<Text>Some custom set of components</Text>
<FlatList
data={section.items}
renderItem={({item}) => (
<View
style={{
padding: 20,
margin: 10,
backgroundColor: 'red',
}}>
<Text>{item.count}</Text>
</View>
)}
keyExtractor={item => item.id}
/>
</View>
);
case 'LIST_3':
return (
<View>
<Text>Some custom set of components</Text>
<FlatList
data={section.items}
renderItem={({item}) => (
<View
style={{
padding: 20,
margin: 10,
backgroundColor: 'blue',
}}>
<Text>{item.score}</Text>
</View>
)}
keyExtractor={item => item.id}
/>
</View>
);
}
};
const sections = [
{
type: 'LIST_1',
data: [1],
items: Array.from(Array(50)).map((el, i) => ({
id: i + 1,
title: i + 1,
})),
},
{
type: 'LIST_2',
data: [2],
items: Array.from(Array(50)).map((el, i) => ({
id: i + 1,
count: i + 1,
})),
},
{
type: 'LIST_3',
data: [3],
items: Array.from(Array(50)).map((el, i) => ({
id: i + 1,
score: i + 1,
})),
},
];
return (
<SafeAreaView>
<SectionList
sections={sections}
keyExtractor={item => item}
renderItem={renderItem}
/>
</SafeAreaView>
);
};

如果这不是最优的解决方案，ScrollView需要大量的时间来渲染，你能指导我什么是更好的?

Answer 1

您的示例可以简单地通过使用SectionList实现。

// Here we define section objects. I arbitrarily added title, footer and style.
const DATA = [
{
title: 'Section 1 header',
footer: 'Section 1 footer',
data: [...Array(3).keys()],
style: { backgroundColor: 'red' },
},
{
title: 'Section 2 header',
footer: 'Section 2 footer',
data: [...Array(3).keys()],
style: { backgroundColor: 'blue' },
},
{
title: 'Section 3 header',
footer: 'Section 3 footer',
data: [...Array(3).keys()],
style: { backgroundColor: 'yellow' },
},
]
// renderItem gets passed an object with item, section, index and separator keys. I'm using item and section to access my own section style.
const Item = ({ item, sectionStyle }) => (
<View style={[styles.item, sectionStyle]}>
<Text style={styles.title}>{item}</Text>
</View>
)
// Use renderSectionHeader and renderSectionFooter props to add, respectively, header and footer.
const App = () => (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item, section }) => <Item item={item} sectionStyle={section.style} />}
renderSectionHeader={({ section: { title } }) => <Text style={styles.header}>{title}</Text>}
renderSectionFooter={({ section: { footer } }) => <Text style={styles.header}>{footer}</Text>}
/>
</SafeAreaView>
)

为了回答您最初的问题，您可能会遇到react-native列表组件的性能问题，这取决于许多因素，包括您的数据和呈现的组件。

你可以在这里阅读更多关于这个话题的内容:https://reactnative.dev/docs/optimizing-flatlist-configuration