具有缩放和swiper的React-Native图像查看器

Question

我在Swiper中有一系列图像,我可以在其中滑过它们,当我点击它们时,它会在Modal上打开(使用Lightbox).但Lightbox没有缩放或滑动.

所以我正在寻找解决方案.我已经有了一个傻瓜,但是当我打开一个图像时,我仍然希望能够扫描所有图像(就像Facebook一样,你可以查看所有的照片,或打开一个并轻扫它们).除此之外,我需要能够进行双指缩放.

现在这是我的代码:

(相关代码)

      <Swiper
        styles={{flex: 1}}
        height={250}
        renderPagination={this.renderPagination}
        paginationStyle={{
          bottom: -23, left: null, right: 10
        }} loop={false}>
          {this.state.imagens.map((item, index) => {
            return(
              <NetworkImage
                source={{uri: `URL/${item.Ficheiro}`, height:250, width: Dimensions.get('window').width}}>
                <Lightbox navigator={this.props.navigator}>
                  <Image
                    style={{ height: 300 }}
                    source={{ uri: `URL/${item.Ficheiro}` }}
                  />
                </Lightbox>
              </NetworkImage>
            );
          })}
      </Swiper>

我使用这个库为swiper https://github.com/leecade/react-native-swiper,我看到它有一个PhotoView,但我无法让它工作.

Answer 1

我一直在努力实现与此类似的东西.

react-native-image-zoom-viewer单击滑动条中的一个图片后,我用于放大模式.在模态中,您可以在图像之间滑动时放大和缩小图像.

https://www.npmjs.com/package/react-native-image-zoom-viewer

我还没有完全实现该解决方案,但似乎您可以将ImageViewer组件包装在任何可以以编程方式打开/关闭它的Modal中.

<Modal visible={this.state.isModalOpened} transparent={true}>
   <ImageViewer imageUrls={images} index={this.state.currentImageIndex}/>
</Modal>

对于位于页面中的模态,对于Swiper,您可以映射图像并返回可点击的图像,如下所示:

<View style={styles.slide} key={index}>
   <TouchableWithoutFeedback onPress={() => {this.openModal(index)}}>
     <Image
       resizeMode="cover"
       style={styles.image}
       source={{ uri: img.url }}
     />
   </TouchableWithoutFeedback>
</View>

如上所示,每个图像都由onPress包装,onPress根据图像索引打开模态,因此它会在右侧照片上打开ImageViewer模态.

而openModal看起来应该是这样的:

function openModal(index) {
   this.setState({isModalOpened: true, currentImageIndex: index })
}

国家应该是:

this.state={
  isModalOpened: false,  //Controls if modal is opened or closed
  currentImageIndex: 0   //Controls initial photo to show for modal
}