【发布时间】：2020-05-31 07:44:22
【问题描述】：
我正在尝试在部分列表中呈现几个平面列表。最终目标是这样的：
但是，我似乎无法让它正确渲染。它多次渲染同一个项目。
<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。但是，如果我想为每个列表显示多个属性，我应该把什么作为数据。
【问题讨论】：
-
您的“帖子”中缺少“数据”属性，我认为这是必要的。你可以用你想要的属性创建一个像“post”这样的对象，并将整个对象传递给“data”
-
你传递给“sections”属性的列表应该是这样的：[{ data: {image: 'someURL.jpg', opinion: 4, votes: 87, name: 'Yeezy V2 350 Beluga'}, title: '最近上传', }]
标签： json reactjs react-native react-native-flatlist react-native-sectionlist