我可以在FlatList(React Native)中使用FlatList吗

Question

现在我想构建一个小型库应用程序。在这个应用程序中，我使用的是FlatList。那么我可以在平面列表中使用平面列表吗？那么我能用FlatList获得这种效果吗？现在我的想法如下。这种方法可行吗？如果这种方法可行，如何使用？我希望任何示例代码都非常简单。

<FlatList
data={this.state.countryList}
renderItem={({ country }) => (
<FlatList
horizontal
data={this.props.album ? this.props.album.mostDown : []}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => {
this.props.navigation.navigate('StageTwo')
}}>
<View style={styles.borderImageGroup}>
<Image style={styles.borderImage} source={{ uri: item['thumbnailURL'] }} />
</View>
</TouchableOpacity>
)}
keyExtractor={item => item.id}
/>
)}
/>

Answer 1

是的，你可以使用它。

Editing:根据您的意见，我假设这将是传递到FlatList 的数据

const FlatListData = [{
country: 'Country Name', // Which will display on bottom
artists: [
{artist_name: 'artistOne_name'},
{artist_name: 'artistTwo_name'},
{artist_name: 'artistThree_name'},
{artist_name: 'artistFour_name'},
]
}]

这里有一个例子。

<View>
<Text>test page</Text>
<FlatList
data={FlatListData}
renderItem={({ item }) => (
<View>
<Text>{item.country}</Text>
<FlatList
data={item.artists}
renderItem={({ item2 }) => (
<View>
<Text>{item2.artist_name}</Text>
</View>
)}
keyExtractor={(item2, index) => index}
/>
</View>
)}
keyExtractor={(item, index) => index}
/>
</View>

Answer 2

我找到了解决方案，它对我来说非常有效。

<FlatList
data={data ? data : []}
renderItem={({ outerItem }) => (
<View>
<FlatList
data={outerItem["data"] ? outerItem["data"] : []}
renderItem={({ innerItem }) => (
<TouchableOpacity onPress={() => {
navigation.navigate("Home", {
artist_id: innerItem["artistID"]
})
}}>
<View>
<Text>Inner FlatList</Text>
</View>
</TouchableOpacity>
)}
keyExtractor={(innerItem) => innerItem.id}
/>
</View>
)}
/>