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

Question

我在 Swiper 中有一组图像，我可以在其中滑动它们，当我点击它们时，它会在模态（使用灯箱）上打开。 但 Lightbox 没有双指缩放或滑动功能。

所以我正在寻找解决方案。 我已经有一个 swiper，但是当我打开一个图像时，我希望仍然能够滑动浏览所有图像（就像 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

我也一直在尝试实现类似的东西。

单击 swiper 中的一张图片后，我将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 包裹，它根据图像索引打开模态，因此它会在右侧照片上打开 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
}

Answer 2

我正在使用带有钩子的react-native-image-zoom-viewer https://www.npmjs.com/package/react-native-image-zoom-viewer

import React, { useState } from 'react';
import ImageViewer from 'react-native-image-zoom-viewer';

const MultipleImageFeaturePost = ({ route, navigation }) => {
            
     **const { item } = route.params
    const [showModal, setshowModal] = useState(false)
    const [imageIndex, setimageIndex] = useState(0)
    const images = item.post_medias.map(s => ({ url: s.media_name })) **
            
     const renderImages = (item, index) => (
        <TouchableOpacity onPress={() => {
     ** setimageIndex(index)
        setshowModal(true) **
     }}>
            <Image
                source={{ uri: item.media_name }}
                resizeMode='stretch'
                style={{ alignSelf: 'center', height: hp('35'), marginVertical: hp('1%'), width: wp('86%'), borderRadius: 7, backgroundColor: '#A9A9A9' }} />
        </TouchableOpacity>
    )
    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: '#E5EBEE' }}>
            <FlatList
                showsHorizontalScrollIndicator={false}
                data={item.post_medias}
                renderItem={({ item, index }) => renderImages(item, index)}
                keyExtractor={(item) => item.post_media_id + ''}
            />
         
        ** <Modal
            visible={showModal}
            transparent={true}
            onSwipeDown={() => setshowModal(false)}>
            <ImageViewer
                imageUrls={images}
                index={imageIndex}
                onSwipeDown={() => setshowModal(false)}
                // onMove={data => console.log(data)}
                enableSwipeDown={true}/>
        </Modal> **
     </SafeAreaView >
     )
     }

export default MultipleImageFeaturePost