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

Question

现在，我想构建一个小型的库应用程序。在这个应用中，我使用的是FlatList。那么我可以在FlatList中使用FlatList吗？那么，我可以通过FlatList获得this kind of effect吗？现在我是这样想的。这是可行的方法吗？如果这种方法可行，如何使用它？我希望任何示例代码都非常简单。

<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

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

<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>
  )}
/>

Answer 2

是的，你可以使用它。

根据您的评论，我假设这将是传递给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>