From e625cf2007c260800b6da047e9db81ad9835ddba Mon Sep 17 00:00:00 2001 From: wuya_smile Date: Thu, 14 Mar 2024 11:37:49 +0800 Subject: [PATCH 1/3] =?UTF-8?q?[Issues:=20#I98F1V]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-image-zoom=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-image-zoom.md | 341 ++++++++++++++++++++++++++++++++ 1 file changed, 341 insertions(+) create mode 100644 1224/react-native-image-zoom.md diff --git a/1224/react-native-image-zoom.md b/1224/react-native-image-zoom.md new file mode 100644 index 00000000..35d55252 --- /dev/null +++ b/1224/react-native-image-zoom.md @@ -0,0 +1,341 @@ +模板版本：v0.1.3 + +

+

react-native-image-zoom

+

+

+ + License + +

+ + + + +> [!TIP] [Github 地址](https://github.com/ascoders/react-native-image-zoom) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm i react-native-image-pan-zoom --save +``` + +#### **yarn** + +```bash +yarn add react-native-image-pan-zoom +``` + + + +下面的代码展示了这个库的基本使用场景： + +```tsx +import React, { useState } from 'react'; +import { Button, Dimensions, Image, LayoutChangeEvent, StyleSheet, Switch, Text, View } from 'react-native'; +import ImageZoom from 'react-native-image-pan-zoom' +import type { IOnClick, IOnMove, ICenterOn } from 'react-native-image-pan-zoom'; + +const formatEventData = (evt: IOnClick) => { + const { locationX, locationY, pageX, pageY } = evt; + return `x ${locationX.toFixed(2)} y ${locationY.toFixed(2)} pageX ${pageX.toFixed(2)} pageY ${pageY.toFixed(2)}`; +} + +const ImageZoomDemo = () => { + //长按 + const [longPressData, setLongPressData] = useState("LongPress: Haven't long pressed yet"); + const longPressHandler = (evt: IOnClick) => { + const data = formatEventData(evt); + setLongPressData(`LongPress: ${data}`); + } + const [longPressTime, setLongPressTime] = useState(800); + + // 双击 + const [doubleClickData, setDoubleClickData] = useState("DoubleClick: Haven't doubleclicked yet"); + const [isEnabled, setIsEnabled] = useState(false); + const toggleDoubleClickSwitch = () => setIsEnabled(previousState => !previousState); + const doubleClickHandler = (evt: IOnClick) => { + setDoubleClickData(`DoubleClick: x: ${evt.locationX.toFixed(2)} y: ${evt.locationY.toFixed(2)}}`); + } + const [clickInterval, setClickInterval] = useState(175); + + // 单击 + const [singleClickData, setSingleClickData] = useState("SingleClick: Haven't singleClicked yet"); + const singleClickHandler = (evt: IOnClick) => { + setSingleClickData(`SingleClick: x: ${evt.locationX.toFixed(2)} y: ${evt.locationY.toFixed(2)}`); + } + + // 下滑 + const [swiperDownData, setSwiperDownData] = useState("SwiperDown: Haven't swipe down yet"); + const [enableSwiperDown, setSwiperDownEnabled] = useState(false); + const [downThreshold, setDownThreshold] = useState(230); + const swiperDownHandler = () => { + setSwiperDownData('SwiperDown: already swipe down'); + } + const toggleSwipeDownSwitch = () => { + setSwiperDownEnabled(previousState => !previousState); + } + + // 移动 + const [moveData, setMoveData] = useState("Move: Haven't move yet"); + const moveHandler = (data: IOnMove) => { + const { type, positionX, positionY, scale, zoomCurrentDistance } = data; + setMoveData(`Move: type:${type} positionX:${positionX.toFixed(2)} positionY:${positionY.toFixed(2)} scale:${scale} zoomCurrentDistance:${zoomCurrentDistance}`); + } + + // 窗口和图片尺寸 + const winWidth = Dimensions.get('window').width; + const winHeight = winWidth; + const [zoomWidth, setZoomWidth] = useState(winWidth); + const [zoomHeight, setZoomHeight] = useState(winHeight); + const defaultViewData = `Current view data:width:${zoomWidth.toFixed(2)}, height:${zoomHeight.toFixed(2)}`; + const [viewData, setViewData] = useState(defaultViewData); + const toggleAdd = () => { + setZoomWidth(winWidth); + setZoomHeight(winHeight); + setViewData(getViewData(winWidth, winHeight)); + } + const toggleDecrease = () => { + setZoomWidth(winWidth * 0.8); + setZoomHeight(winHeight * 0.8); + setViewData(getViewData(winWidth * 0.8, winHeight * 0.8)); + } + const getViewData = (width: number, height: number) => { + return `Current view data:width: ${width.toFixed(2)} height: ${height.toFixed(2)}` + } + + // 双指缩放 + const [isEnablePinchToZoom, setPinchToZoomState] = useState(false); + const togglePinchToZoomSwitch = () => { + setPinchToZoomState(previousState => previousState); + } + const [minScale, setMinScale] = useState(0.6); + const [maxScale, setMaxScale] = useState(10); + + // 单指移动 + const [isEnablePanToMove, setPanToMoveState] = useState(false); + const [singleClickDistance, setSingleClickDistance] = useState(10); + const togglePanToMoveSwitch = () => { + setPanToMoveState(previousState => !previousState); + } + const [maxOverflow, setMaxOverFlow] = useState(100); + + // 自定义中心 + const defaultCenter: ICenterOn = { + x: 0, + y: 0, + scale: 1, + duration: 300 + } + const [centerData, setCenterDatat] = useState((): ICenterOn | undefined => undefined); + const leftCenter: ICenterOn = { + x: 100, + y: 100, + scale: 1, + duration: 300 + } + const toggleSettingCenter = (val: boolean) => { + if (val) { + setCenterDatat(leftCenter); + } else { + setCenterDatat(defaultCenter); + } + } + + // 中心焦点 + const [enableCenterFocus, setEnterFocusIsEnable] = useState(false); + + // 动画驱动 + const [enableNativeDriver, setNativeDriverIsEnable] = useState(false); + + // 禁用安卓渲染 + const [enableAndroidRender, setAndroidRenderEnable] = useState(false); + + // 触发想切换到左边的图，向左滑动速度超出阈值触发 + const dragLeftHandler = () => { + console.log('dragLeftHandler!!!'); + } + + // 松手但是没有取消看图 + const responderReleaseHandler = (vx: number, scale: number) => { + setViewData(`ResponderRelease: scale: ${scale}`); + } + + // 成为响应者 + const startPanResponderHandler = () => { + console.log('startPanResponderHandler!!!'); + return true; + } + const movePanResponderHandler = () => { + console.log('movePanResponderHandler!!!'); + return false; + } + const terminationRequestHandler = () => { + console.log('movePanResponderHandler!!!'); + return false; + } + + const getButtonColor = (current: number, origin: number): string => { + return current === origin ? '#007AFF99' : '#007AFF'; + } + + // 横向超出距离 + const offsetHandler = (offsetX?: number) => { + setViewData(`HorizontalOuterRangeOffset: offsetX: ${offsetX?.toFixed(2)}`); + } + + // 图片渲染完成 + const layoutChangeHandler = (event: LayoutChangeEvent) => { + console.log('layoutChangeHandler!!!'); + } + + return ( + + 操作区域：