帶有縮放和滑動器的 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