react-native-image-zoom-viewer 预览图片

孟宪磊mxl

已于 2024-04-25 09:05:01 修改

阅读量761

点赞数 3

文章标签： react native react.js javascript

于 2024-04-25 08:59:19 首次发布

本文链接：https://blog.csdn.net/m0_69210482/article/details/138175238

版权

本文介绍了如何在ReactNative应用中使用`react-native-image-zoom-viewer`组件创建一个图片预览功能，用户可以点击小图查看原图，并通过Modal实现类似微信朋友圈的浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-native-image-zoom-viewer实现了类似微信朋友圈浏览图片的效果，点击小图片实现浏览原图效果

封装组件：

/* 图片预览组件 */
import { View, Text,Modal } from 'react-native'
import React from 'react'
import ImageViewer from 'react-native-image-zoom-viewer';
export default function Index({isVisible,imgs,close}) {
  return (
    <Modal visible={isVisible} transparent={true}>
        <ImageViewer
         imageUrls={imgs}
         onSwipeDown={close}  // 向下滑动关闭模态框
         enableSwipeDown={true}  // 确保启用向下滑动
         />
        <Text style={{color:"#fff"}}>关闭</Text>
    </Modal>
  )
}

使用：

import { View, Text,Image,TouchableOpacity } from 'react-native'
import React,{useState} from 'react'
import ImageView from '../../../components/ImageView'
import { setWidth } from '../../../utils/styleAdb'
export default function index() {
  const [imageModal, setimageModal] = useState(false)
  const [imgs, setimgs] = useState([{url:'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'},{url:'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'}])
  return (
    <View style={{marginTop:setWidth(300)}}>
      <TouchableOpacity onPress={()=>{setimageModal(true)}}>
        <Image source={{uri:'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'}}style={{width:100,height:100}}></Image>
      </TouchableOpacity>

      <ImageView  isVisible={imageModal} close={()=>{setimageModal(false)}} imgs={imgs}/>
    </View>
  )
}