React Native 点击图片变大，查看图片

Index.js：

import React from 'react'
import {
  View,
  Text,
  ScrollView,
  Image,
  Modal,
  TouchableWithoutFeedback,
} from 'react-native'
import useList from './useList'
import moment from 'moment'
import { Icon } from '../../../../component/light'
import ImageViewer from 'react-native-image-zoom-viewer'
import styles from './styles'

export default function Home(props) {
  const {
    userInfo,
    isModelVisible,
    handleShowModel,
    handleHideModel,
    handleJumpPage,
    handleQuit,
  } = useList(props)
  return (
    
      
         handleJumpPage('1')}>
          
            
               handleShowModel()}>
                
              
              
                
                  
                    {userInfo.nickname}
                  
                  {userInfo.isVipStatus ? (
                    
                  ) : null}
                
                
                  
                    账号：{userInfo.username}
                  
                
              
              
                
              
            
            
              {userInfo.isVipStatus === true ? (
                
                  有效期至{moment(userInfo.dueDate - 0).format('YYYY-MM-DD')}
                
              ) : userInfo.isVipStatus === false ? (
                VIP已经过期
              ) : null}
            
          
        
        
          
            退出登录
          
        
      
      
         handleHideModel()}
        />
      
    
  )
}

import { useState, useEffect } from 'react'
import { useNavigation } from '@react-navigation/native'
import Api from '../../../../api'

export default function useList() {
  const navigation = useNavigation()
  const [userInfo, setUserInfo] = useState({})
  const [isModelVisible, setIsModelVisible] = useState(false)

  const handleGetUserInfo = () => {
    Api.h5.userGetInfo({ isLoading: false }).then((res) => {
      if (res.code === 200) {
        let userInfo = res.data
        setUserInfo(userInfo)
        console.log(userInfo)
      }
    })
  }

  const handleShowModel = () => {
    setIsModelVisible(true)
  }
  const handleHideModel = () => {
    setIsModelVisible(false)
  }

  //跳转
  const handleJumpPage = (path) => {
    console.log(path)
  }

  const handleQuit = () => {
    navigation.navigate('Login')
  }

  useEffect(() => {
    handleGetUserInfo()
    // eslint-disable-next-line
  }, [])

  return {
    userInfo,
    isModelVisible,
    handleShowModel,
    handleHideModel,
    handleJumpPage,
    handleQuit,
  }
}

参考链接：

https://www.npmjs.com/package/react-native-image-zoom-viewer

https://chat.xutongbao.top/