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>
  )
}