React-Native 嵌套 Flatlist

Question

我正在尝试使用此人可能拥有的图像显示厨师的个人资料。我有一组厨师，其中包含一些信息，例如姓名和个人资料图片。Cooks 数组还包含一个图片数组。我想显示cook.profile 图片名称，然后显示链接到他们个人资料的照片列表。我可以显示姓名和个人资料图片，但我不确定如何在每个厨师的姓名下显示图片数组（水平滚动）。 这是厨师数组：

cooks = [{
        "id": "1001",
        "firstName": "Mike",
        "profilePic": "Portrait.jpg",
        "photos": [{
                "url": "img.jpg"
            },
            {
                "url": "img2.jpg"
            },
            {
                "url": "img3.jpg"
            },
            {
                "url": "img4.jpg"
            }
        ]
    },
    {
        "id": "1002",
        "firstName": "Marla",
        "profilePic": "profilePic.jpg",
        "photos": [{
                "url": "img1.jpg"
            },
            {
                "url": "img2.jpeg"
            },
            {
                "favorite": "true",
                "url": "img3.jpg"
            },
            {
                "url": "img4.jpeg"
            }
        ]
    }
]

================================================== ================

    <FlatList
        data={this.props.cooks}
        renderItem={({ item }) => (
          <View>
            <TouchableOpacity >
            <CardSection>
              <View style={thumbnailContainerStyle}>
                <Image
                  style={thumbnailStyle}
                  source={{ uri: item.profilePic }}
                />
                </View>
                <View style={headerContentStyle}>
                  <Text style={headerTextStyle}>{item.firstName}</Text>
                </View>
          </CardSection>
          </TouchableOpacity>
          {/*
            following part is not working as expected.
          */}
          <FlatList
              data={item.photos}
              renderItem={({ item2 }) =>
              <View>
                <Image
                  style={imageStyle}
                  source={{ uri: item2.url }}
                />
              </View>
            }
            keyExtractor={(item2, index) => index}
          />
          </View>
        )}
        keyExtractor={(item, index) => index}
      />

================================================== ==========

const styles = {
  iconStyle: {
      paddingLeft: 10,
      justifyContent: 'center',
      alignItems: 'center',
      height: 23,
      width: 25
  },
  containerStyle: {
    flexDirection: 'row',
    flex: 1
  },
  inputStyle: {
    paddingLeft: 10,
    fontSize: 30,
    height: 30,
    width: 350
  },
  headerContentStyle: {
    flexDirection: 'column',
    paddingTop: 20
  },
  headerTextStyle: {
    fontSize: 25
  },
  thumbnailStyle: {
    borderRadius: 15,
    height: 100,
    width: 100
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  imageStyle: {
    height: 400,
    flex: 1,
    width: null
  }
};

Answer 1

您可以从“react-native”库中实现 SectionList 而不是使用嵌套的 FlatList。它更容易和更好的解决方案。你有所有的文档在这里。希望这可以帮到你！