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

Index.js:

javascript 复制代码
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 (
    <ScrollView style={styles.mMeScrollView}>
      <View style={styles.mMeWrap}>
        <TouchableWithoutFeedback onPress={() => handleJumpPage('1')}>
          <View style={styles.mMeUserInfoWrap}>
            <View style={styles.mMeUserInfoMain}>
              <TouchableWithoutFeedback onPress={() => handleShowModel()}>
                <Image
                  source={{ uri: userInfo.avatarCdn }}
                  style={styles.mMeAvatar}
                  resizeMode="stretch"
                ></Image>
              </TouchableWithoutFeedback>
              <View style={styles.mMeUserInfoMainInfo}>
                <View style={styles.mMeNicknameWrap}>
                  <Text
                    style={styles.mMeNickname}
                    ellipsizeMode="tail"
                    numberOfLines={1}
                  >
                    {userInfo.nickname}
                  </Text>
                  {userInfo.isVipStatus ? (
                    <Icon name="vip" style={styles.mMeVipIcon}></Icon>
                  ) : null}
                </View>
                <View style={styles.mMeUsernameWrap}>
                  <Text
                    style={styles.mMeUsername}
                    ellipsizeMode="tail"
                    numberOfLines={1}
                  >
                    账号:{userInfo.username}
                  </Text>
                </View>
              </View>
              <View style={styles.mMeArrowIconWrap}>
                <Icon name="arrow" style={styles.mMeArrowIcon}></Icon>
              </View>
            </View>
            <View style={styles.mMeDueDateWrap}>
              {userInfo.isVipStatus === true ? (
                <Text style={styles.mMeDueDate}>
                  有效期至{moment(userInfo.dueDate - 0).format('YYYY-MM-DD')}
                </Text>
              ) : userInfo.isVipStatus === false ? (
                <Text style={styles.mMeDueDate}>VIP已经过期</Text>
              ) : null}
            </View>
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback onPress={handleQuit}>
          <View style={styles.mMeQuitWrap}>
            <Text style={styles.mMeQuitText}>退出登录</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
      <Modal visible={isModelVisible} transparent={true}>
        <ImageViewer
          imageUrls={[
            {
              url: userInfo.avatarCdn,
            },
          ]}
          onClick={() => handleHideModel()}
        />
      </Modal>
    </ScrollView>
  )
}
javascript 复制代码
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/

相关推荐
海的诗篇_1 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
黄瓜沾糖吃2 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟2 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
浩龙不eMo3 小时前
✅ Lodash 常用函数精选(按用途分类)
前端·javascript
爱分享的程序员3 小时前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
Jackson_Mseven3 小时前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
pe7er4 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er4 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
islandzzzz4 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端4 小时前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构