如何使用带有flatlist的react-native-image-carousel库

时间:2019-01-15 07:11:37

标签: image react-native react-native-flatlist

我正在使用react-native-image-carousel库显示我的图库,我希望图像在打开后可以滑动。

虽然我使用的是静态数据的相同示例,但其工作原理。这里是示例https://github.com/anvilabs/react-native-image-carousel/blob/master/Example/App.js。但是我正在使用平面列表来散布我的图片,并且在尝试与平面列表一起使用时出现错误。

这是我的渲染图像功能

    renderImage = (idx) => (
    <Image
      style={StyleSheet.absoluteFill}
      resizeMode="contain"
      source={{ uri: this.state.gallery[idx] }}
    />
  );

这是我的单位列表

<View>
        <FlatList
          numColumns={3}
          data={this.state.gallery}
          keyExtractor={(i) => i}
          renderItem={({ item }) =>
            <ImageCarousel
            ref={(imageCarousel) => {
              this._imageCarousel = imageCarousel;
            }}
              renderContent={this.renderImage}>

              <View style={styles.galleryStyle}>
                <Image style={styles.imageStyle1} source={{ uri: item.image }} />
              </View>

            </ImageCarousel>
          }
        ></FlatList>
      </View>

如果我正在运行此代码,则会收到类似error while updating property src of a view value of uri can't be cast from readableNativeMap to string的错误

我的画廊状态包含

(3) [{…}, {…}, {…}]
0: {project: 2, image: "http://media/projects/gallery_image/homepage-banner.jpg"}
1: {project: 2, image: "http://media/project/software-development.jpg"}
2: {project: 2, image: "http://media/projects/gallery_image/New_FRS_Image_Mobile_app_development.jpg"}
length: 3
__proto__: Array(0)

并且我将状态定义为

this.state={
gallery: {
        images: []
      }
}

如果有人知道,请提供帮助。感谢advace

0 个答案:

没有答案