如何覆盖SectionList中基于renderItem项的React Native以使用基于节的

Question

根据FB文档，您可以覆盖renderItem默认的基于项的渲染，以使用react native中SectionList中基于节的渲染，但我还没有找到实现这一点的方法。请帮忙。

这是链接

Answer 1

我只有一个解决方法，我还没有找到一种方法来使renderItem道具按节而不是按项渲染。

对于所有要水平渲染的部分，请使用FlatList并将该部分的数据设置为数组数组。请记住，对于要垂直渲染的listItems，data属性应为NOT数组。

这是的数据结构示例

const DATA = [
{
header: '30 - 40% Off',
type: 'horizontal',
//horizontal list here.... As stated above, data is an array that contains an array of the actual data
data: [
[
{
imgUri:
'https://images.unsplash.com/photo-1607930231879-36bbb29ffe0a',
store: 'Asanka Store',
storeRating: '4.4',
originalPrice: '10.00',
discountedPrice: '5.00',
},
{
imgUri:
'https://images.unsplash.com/photo-1583506522440-b2639ef4c1d8',
store: 'Maame Dorkono Shop',
storeRating: '3.8',
originalPrice: '27.00',
discountedPrice: '18.99',
},
{
imgUri:
'https://images.unsplash.com/photo-1610397962076-02407a169a5b',
store: 'Thywill Store',
storeRating: '3.8',
originalPrice: '27.00',
discountedPrice: '18.99',
},
],
],
},
{
header: 'All Stores',
//Vertical List here
data: [
{
imgUri:
'https://images.unsplash.com/photo-1598965675045-45c5e72c7d05',
store: 'Thywill Store',
storeRating: '3.8',
originalPrice: '27.00',
discountedPrice: '18.99',
},
{
imgUri:
'https://images.unsplash.com/photo-1574137907555-8e9ad5bc17fa',
store: 'Asanka Store',
storeRating: '4.4',
originalPrice: '10.00',
discountedPrice: '5.00',
}
],
},
];

现在在SectionList中使用它。我们将使用平面列表来渲染水平列表。

<SectionList
sections={DATA}
keyExtractor={(item, index) => index}
renderSectionHeader={({section}) => (
<Text>{section.header}</Text>
)}
renderItem={({section, item}) => {
return section.type === 'horizontal' ? (
<FlatList
horizontal
data={section.data[0]}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => item.store + index}
renderItem={({item}) => <Item item={item} />}
/>
) : (
<Item item={item} />
);
}}
/>