javascript - 具有缩放和滑动器的 React-Native 图像查看器

Question

我在 Swiper 中有一组图像，我可以在其中滑动浏览它们，当我点击其中的图像时，它会在模态窗口中打开(使用灯箱)。但是 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>

我将这个库用于滑动器 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 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
}