[英]Rendering a list within a list in React Native
I am trying to render a list with a two sub data arrays within each object.我正在尝试在每个对象中呈现一个包含两个子数据数组的列表。 I am trying to display this array of game objects, that has a gameTitle, an array for publishers, an array for Developers and an id.
我试图显示这个游戏对象数组,它有一个游戏标题、一个发布者数组、一个开发者数组和一个 id。 The array for publishers and developers is not the same for every game.
发行商和开发商的阵列对于每款游戏都不尽相同。 At first I wanted to make a sectionList, but there are two data sets, which is what I believe is the problem in not working.
起初我想做一个sectionList,但是有两个数据集,我认为这是不工作的问题。 So now I am thinking of making a flatlist and making either a flatlist or sectionlist within that for both the publisher and developer arrays.
所以现在我正在考虑制作一个平面列表,并在其中为发布者和开发者数组制作一个平面列表或部分列表。 I still can't figure out how to do this though.
我仍然无法弄清楚如何做到这一点。 What should I be trying to do instead?
我应该尝试做什么?
creatorData: Array [
Object {
"DevData": Array [
Object {
"Developer": "DICE",
},
],
"GameTitle": "Battlefield 1",
"PubData": Array [
Object {
"Publisher": "Electronic Arts",
},
],
"id": 0,
},
Object {
"DevData": Array [
Object {
"Developer": "DICE",
},
Object {
"Developer": "DICE Los Angeles",
},
],
"GameTitle": "Battlefield 4",
"PubData": Array [
Object {
"Publisher": "Electronic Arts",
},
],
"id": 1,
}]
Hey so basically a Flatlist inside a flatlist will work, but we need to make sure that the childs flatlist doesnt always override the parent flatlists scroll.嘿,所以基本上平面列表中的平面列表可以工作,但我们需要确保子平面列表不会总是覆盖父平面列表滚动。
So for that basically suppose因此,基本上假设
const data = [{a:{ childData:[] }} , {b:{childData:[]}} ]
const renderEachRow = ({item}) => {
return(
<View style={{height:HEIGHT_DEVICE/3,marginHorizontal:30}} >
<Text>Title</Text>
<Flatlist data={item.childData} renderItem={renderChildRow} />
</View>
)
return(
<View style={{flex:1}}>
<FLatlist data={data} renderItem={renderEachRow}
style={{flex:1}}
/>
)
</View>
}
Hope this helps, feel free for doubts希望对你有帮助,有疑问请多多包涵
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.