React-Native：Flatlist 嵌套在 SectionList 中

Question

我正在尝试在节列表中呈现几个平面列表。最终目标是这样的：

但是，我似乎无法正确呈现它。它多次呈现相同的项目。

            <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',
            }
        ];

我想要 "Popular Sneakers"、"Popular Streetwear" 和 "Recently Uploaded" 部分。该对象应呈现在其各自部分的下方。

请帮我弄清楚我做错了什么。我知道 sectionList 必须有一个 Data 和一个 Title。但是如果我想为每个列表显示多个属性，我应该把什么作为数据。

Answer 1

您可以不使用分区列表来完成。您可以使用嵌套的 FlatList 并传递数据。通过使用这种方法，您可以自定义或呈现任何布局作为部分 header 以及内部 body。您可以根据需要修改上述代码。

我的虚拟 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>

如果它满足您的要求，请告诉我。谢谢

React-Native：Flatlist 嵌套在 SectionList 中

React-Native: Flatlist nested in SectionList

json

reactjs

react-native

react-native-flatlist

react-native-sectionlist