React-Native：嵌套在 SectionList 中的平面列表
Posted
技术标签:
【中文标题】React-Native：嵌套在 SectionList 中的平面列表【英文标题】：React-Native: Flatlist nested in SectionList 【发布时间】：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: '最近上传', ] 【参考方案1】：您可以在不使用部分列表的情况下执行此操作。您可以使用嵌套的 FlatList 并通过您的数据。通过使用这种方法，您可以自定义或呈现任何布局作为节标题以及内部正文。您可以根据需要修改上述代码。
我的虚拟 JSON 数据：
var data = [
"id": 1,
"title": "Passed Orders",
"innerArray": [
"id": 1,
"name": "Shivam Tiwari 1",
"star": "150",
"image": "https://lh3.googleusercontent.com/-sUUgyO92gjw/Xe5Df6MwaZI/AAAAAAAABDc/bYtyIbnUM8ACX83GYB7-XjFzs-HAmbE1QCK8BGAsYHg/s0/2019-12-09.jpg"
,
"id": 2,
"name": "Shivam Tiwari 2",
"star": "150",
"image": "https://lh3.googleusercontent.com/-OUEDRCj2dQo/Xe5Da2ZmqhI/AAAAAAAABDM/j9qXtid6afYaHNi-pwsOlVOUUdFej-dXgCK8BGAsYHg/s0/2019-12-09.jpg"
,
"id": 4,
"name": "Shivam Tiwari 4",
"star": "150",
"image": "https://lh3.googleusercontent.com/-ja97CHMzpN4/Xe5DcMVro2I/AAAAAAAABDQ/Z0Tht5w0TIUw37t8newe5YF6RgZYayXFwCK8BGAsYHg/s0/2019-12-09.jpg"
]
,
"id": 2,
"title": "Top People",
"innerArray": [
"id": 5,
"name": "Shivam Tiwari",
"star": "15000",
"image": "https://lh3.googleusercontent.com/-1NXIa1zFf7E/Xe5DyVxnkHI/AAAAAAAABDg/BTB_V4UtLNwQHqIrIXKl6cMKlutU7h3JACK8BGAsYHg/s0/2019-12-09.jpg"
,
"id": 6,
"name": "Shubham Tripathi",
"star": "45",
"image": "https://lh3.googleusercontent.com/-ja97CHMzpN4/Xe5DcMVro2I/AAAAAAAABDQ/Z0Tht5w0TIUw37t8newe5YF6RgZYayXFwCK8BGAsYHg/s0/2019-12-09.jpg"
,
"id": 7,
"name": "Kartikeya Sharma",
"star": "55",
"image": "https://lh3.googleusercontent.com/-sUUgyO92gjw/Xe5Df6MwaZI/AAAAAAAABDc/bYtyIbnUM8ACX83GYB7-XjFzs-HAmbE1QCK8BGAsYHg/s0/2019-12-09.jpg"
,
"id": 8,
"name": "Manoj",
"star": "90",
"image": "https://lh3.googleusercontent.com/-ulyCVQkAlK4/Xe5DZjhE9dI/AAAAAAAABDI/1zgelciGvyE67cOYEqD-XRlmO-JQAW-yACK8BGAsYHg/s0/2019-12-09.jpg"
]
,
"id": 3,
"title": "Favourite Celeb",
"innerArray": [
"id": 9,
"name": "Manoj Kumar Verma",
"star": "20",
"image": "https://lh3.googleusercontent.com/-OUEDRCj2dQo/Xe5Da2ZmqhI/AAAAAAAABDM/j9qXtid6afYaHNi-pwsOlVOUUdFej-dXgCK8BGAsYHg/s0/2019-12-09.jpg"
,
"id": 10,
"name": "Ashish",
"star": "10",
"image": "https://lh3.googleusercontent.com/-ulyCVQkAlK4/Xe5DZjhE9dI/AAAAAAAABDI/1zgelciGvyE67cOYEqD-XRlmO-JQAW-yACK8BGAsYHg/s0/2019-12-09.jpg"
,
"id": 11,
"name": "Balendu Tiwari",
"star": "150",
"image": "https://lh3.googleusercontent.com/-ja97CHMzpN4/Xe5DcMVro2I/AAAAAAAABDQ/Z0Tht5w0TIUw37t8newe5YF6RgZYayXFwCK8BGAsYHg/s0/2019-12-09.jpg"
,
"id": 12,
"name": "Amit Kumar Singh",
"star": "200",
"image": "https://lh3.googleusercontent.com/-1NXIa1zFf7E/Xe5DyVxnkHI/AAAAAAAABDg/BTB_V4UtLNwQHqIrIXKl6cMKlutU7h3JACK8BGAsYHg/s0/2019-12-09.jpg"
]
]
现在你可以在状态上设置它：
constructor(props)
super(props);
this.state =
dataArr: data
;
这是布局的代码：
<View style=flex: 1,width: '95%', backgroundColor: '#FFFFFF', alignSelf: 'center'>
<FlatList data=this.state.dataArr
extraData=this.state
// style=marginBottom: 200
renderItem=( item ) =>
<View
style=marginTop: 0, width: '100%', justifyContent: 'center', alignItems: 'center' >
<View style=paddingTop: 10,paddingBottom:0, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'>
<View style=backgroundColor: '#000000', paddingHorizontal: 20, borderRadius: 10, elevation: 1, shadowColor: "#0000002B", shadowRadius: 3, shadowOffset: width: 0, height: 0 , shadowOpacity: 1.0>
<Text style=fontSize: 30, fontFamily: 'BebasKai', color: '#FFFFFF', textAlign: 'center', paddingHorizontal: 20, paddingVertical: 4>item.title</Text>
</View>
<FlatList data=item.innerArray
extraData=this.state
horizontal=true
style=marginTop: 10
renderItem=( item: innerData, index ) =>
<View style=width: celebViewWidth, height: celebViewHeight, backgroundColor: "#FFFFFF", padding: 5>
<TouchableOpacity style=width: '100%', height: '100%', alignItems: 'center'>
<Text style=fontSize: 15, fontFamily: 'BebasKai', color: '#747474', textAlign: 'center', numberOfLines=1>innerData.name</Text>
<View style=marginTop: 3, flex: 1, width: '100%', borderRadius: 10, elevation: 1, shadowColor: "#0000002B", shadowRadius: 2, shadowOffset: width: 0, height: 2 , shadowOpacity: 1.0, backgroundColor: '#FFFFFF'>
<Image
style=width: '100%', height: '100%', borderRadius: 10
source=uri: innerData.image
/>
</View>
<View style=backgroundColor: 'yellow', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingHorizontal: 5, paddingVertical: 1, borderRadius: 10, position: 'absolute', bottom: 6>
<Image
style=width: 12, height: 12
source=require('../SupportingFiles/Icons/black-star.png')
/>
<Text style=fontSize: 15, fontFamily: 'BebasKai', color: '#000000', textAlign: 'center', alignSelf: 'center', marginLeft: 3>innerData.star</Text>
</View>
</TouchableOpacity>
</View>
/>
</View>
</View>
/>
</View>
如果它满足您的要求，请告诉我。谢谢
【讨论】：
您好，您的代码只为我提供了“已通过订单”内部数组中人员的单行平面列表。我怎样才能做到这一点，以便它还显示“***人物”和“最喜欢的名人”的更多水平平面列表。谢谢！ 嗨，没关系，我修复了错误。非常感谢。我只需要从两个顶视图中删除 justifyContent: 'center', alignItems: 'center' 它不会导致虚拟化列表，因为部分列表有平面列表以上是关于React-Native：嵌套在 SectionList 中的平面列表的主要内容，如果未能解决你的问题，请参考以下文章
react-native ScrollView 嵌套 FlatList滚动
具有不同字体大小（首字母，首字母）的 react-native 嵌套文本
如何使用 jest+enzyme 在 react-native 中选择一个元素（文本、视图）（主要是当文本/视图嵌套在组件的深处时）？