セクションリストでいくつかのフラットリストをレンダリングしようとしています。最終的な目標は次のとおりです。
ただし、正しくレンダリングできないようです。同じアイテムを複数回レンダリングします。
<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 にはDataとが必要Titleです。しかし、リストごとに複数の属性を表示したい場合、データとして何を入れればよいでしょうか。