Question

我正在尝试用此人可能拥有的图像显示厨师的个人资料。我有一系列的厨师，有一些信息，如姓名和个人资料图片。 Cooks数组还包含一系列图片。我想显示cook.profile Pic名称，然后显示链接到其个人资料的照片列表。我能够显示名称和个人资料Pics，但我不知道如何在每个厨师的名字下显示图片数组（水平滚动）。 这里是cooks数组：

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

这是我在一个项目中创建的示例。看看它可能对您有帮助

gb

Answer 2

您可以从“ react-native”库中实现SectionList，而不是使用嵌套的FlatList。它更容易和更好的解决方案。您已经here拥有了所有文档。希望这可以帮助您！

React-Native嵌套Flatlist

2 个答案: