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
}

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

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

2 个答案: