我正在尝试在部分列表中呈现几个平面列表。最终目标是这样的：
但是，我似乎无法让它正确渲染。它多次渲染同一个项目。
<SafeAreaView style={styles.container}>
<SectionList
sections={posts}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) =>
<FlatList
horizontal
data={posts}
renderItem={this.renderPosts}
keyExtractor={(item, index) => index}
/>
}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
/>
</SafeAreaView>
renderPosts = (element) => {
const { image, opinions, votes, name } = element.item;
return (
<Card>
<Card.Cover source={{ uri: image }}/>
<View>
<Card.Content>
<Title numberOfLines={1}>{name}</Title>
</Card.Content>
<Card.Content>
<Caption>{opinions} opinions</Caption>
<Headline style={{ fontSize: 10 }}>{votes}%</Headline>
</Card.Content>
</View>
</Card>
)
}
JSON 对象如下所示：
const posts = [
{
image: 'https://someURL.jpg',
opinions: 4,
votes: 87,
name: 'Yeezy V2 350 Beluga',
title: 'Recently uploaded',
},
{
image: 'https://someURL.jpg',
opinions: 12,
votes: 43,
name: 'Supreme Hoodie',
title: 'Popular Streetwear',
},
{
image: 'https://someURL.jpg',
opinions: 12,
votes: 90,
name: 'Travis Scott Air Jordan 1s',
title: 'Popular Sneakers',
},
{
image: 'https://someURL.jpg',
opinions: 4,
votes: 87,
name: 'Yeezy V2 350 Beluga',
title: 'Recently uploaded',
},
{
image: 'https://someURL.jpg',
opinions: 12,
votes: 43,
name: 'Supreme Hoodie',
title: 'Popular Streetwear',
},
{
image: 'https://someURL.jpg',
opinions: 12,
votes: 90,
name: 'Travis Scott Air Jordan 1s',
title: 'Popular Sneakers',
}
];
我想要有“流行运动鞋”、“流行街头服饰”和“最近上传”的部分。该对象应在其各自的部分下方呈现。
请帮我弄清楚我做错了什么。我知道 sectionList 必须有 aData和 a Title。但是如果我想为每个列表显示多个属性，我应该把什么作为数据。