Revize 95c70c73
Přidáno uživatelem Fantič před více než 1 rok
| src/components/item/ZoomableImage.tsx | ||
|---|---|---|
| 1 | 1 |
import React, { useState, useEffect, useRef } from "react";
|
| 2 | 2 |
|
| 3 |
import { Box, Flex, Text, Image, Popover, Pressable, VStack, View, Modal, Overlay } from "native-base"
|
|
| 4 |
import { PinchGestureHandler, PanGestureHandler, State } from "react-native-gesture-handler";
|
|
| 3 |
import { Box, Flex, Text, Image, Popover, Pressable, VStack, View, Modal, Overlay, HStack } from "native-base"
|
|
| 4 |
import { PinchGestureHandler, PanGestureHandler, State, GestureHandlerRootView } from "react-native-gesture-handler";
|
|
| 5 | 5 |
import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
|
| 6 | 6 |
import Svg, { SvgXml, Path } from "react-native-svg";
|
| 7 | 7 |
import { FullscreenIcon, ExitfullscreenIcon } from "../general/Icons";
|
| ... | ... | |
| 14 | 14 |
const [fullScreenMode, setFullScreenMode] = useState<boolean>(false); |
| 15 | 15 |
const [viewSize, setViewSize] = useState({ height: 0, width: 0 });
|
| 16 | 16 |
|
| 17 |
const imgRef = useRef<React.ReactElement>(); |
|
| 17 | 18 |
const panRef = useRef<React.ReactElement>(); |
| 18 | 19 |
const pinchRef = useRef<React.ReactElement>(); |
| 19 | 20 |
|
| ... | ... | |
| 90 | 91 |
}; |
| 91 | 92 |
}); |
| 92 | 93 |
|
| 94 |
const zoomOut = () => {
|
|
| 95 |
translateX.value = 0; |
|
| 96 |
translateY.value = 0; |
|
| 97 |
scale.value = DEFAULT_SCALE; |
|
| 98 |
} |
|
| 93 | 99 |
|
| 94 |
console.log(viewSize) |
|
| 95 |
console.log(fullScreenMode) |
|
| 96 | 100 |
return ( |
| 97 | 101 |
<View> |
| 98 | 102 |
<Pressable onPress={() => setFullScreenMode(true)}>
|
| ... | ... | |
| 100 | 104 |
</Pressable> |
| 101 | 105 |
|
| 102 | 106 |
<Modal isOpen={fullScreenMode} onClose={() => setFullScreenMode(false)} size="full">
|
| 103 |
<Box
|
|
| 107 |
<View
|
|
| 104 | 108 |
flex={1}
|
| 105 | 109 |
justifyContent="center" |
| 106 | 110 |
alignItems="center" |
| 107 |
backgroundColor="transparent" // Make the background transparent
|
|
| 111 |
backgroundColor="white" // Make the background transparent
|
|
| 108 | 112 |
> |
| 109 |
<Pressable |
|
| 110 |
position="absolute" |
|
| 111 |
bottom={20}
|
|
| 112 |
right={0}
|
|
| 113 |
padding={2}
|
|
| 114 |
zIndex={1000}
|
|
| 115 |
onPress={() => setFullScreenMode(false)}
|
|
| 116 |
> |
|
| 117 |
{/* Your close button (you can replace this with an icon) */}
|
|
| 118 |
<Box style={{width: 70, height: 30, backgroundColor:"white", borderRadius: 10}} alignItems={"center"} justifyContent="center">
|
|
| 119 |
<Text>Close</Text> |
|
| 120 |
</Box> |
|
| 121 |
</Pressable> |
|
| 122 |
<Image |
|
| 123 |
height={viewSize.height}
|
|
| 124 |
width={viewSize.width}
|
|
| 125 |
alt="image" |
|
| 126 |
source={{ uri: props.imageUri }}
|
|
| 127 |
resizeMode={"contain"}
|
|
| 128 |
/> |
|
| 129 |
</Box> |
|
| 113 |
<Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, bottom: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
|
|
| 114 |
<Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={1} onPress={() => { zoomOut()}}>
|
|
| 115 |
<ExitfullscreenIcon color="white" /> |
|
| 116 |
</Pressable> |
|
| 117 |
<Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => setFullScreenMode(false)}>
|
|
| 118 |
<FullscreenIcon color="white" /> |
|
| 119 |
</Pressable> |
|
| 120 |
|
|
| 121 |
</Flex> |
|
| 122 |
<GestureHandlerRootView> |
|
| 123 |
<PinchGestureHandler |
|
| 124 |
ref={pinchRef}
|
|
| 125 |
// @ts-ignore |
|
| 126 |
onGestureEvent={onGestureEvent}
|
|
| 127 |
simultaneousHandlers={[imgRef, panRef]}>
|
|
| 128 |
<Animated.View style={[{ flex: 1 }, animatedStyle]}>
|
|
| 129 |
<PanGestureHandler |
|
| 130 |
ref={panRef}
|
|
| 131 |
simultaneousHandlers={[imgRef, pinchRef]}
|
|
| 132 |
onGestureEvent={onPanEvent}
|
|
| 133 |
onHandlerStateChange={(nativeEvent: any) => {
|
|
| 134 |
if (nativeEvent.state === State.END) {
|
|
| 135 |
console.log(nativeEvent) |
|
| 136 |
} |
|
| 137 |
}} |
|
| 138 |
> |
|
| 139 |
<Animated.View style={[{
|
|
| 140 |
flex: 1, |
|
| 141 |
}]}> |
|
| 142 |
<Image |
|
| 143 |
ref={imgRef}
|
|
| 144 |
height={viewSize.height}
|
|
| 145 |
width={viewSize.width}
|
|
| 146 |
alt="image" |
|
| 147 |
source={{ uri: props.imageUri }}
|
|
| 148 |
resizeMode={"contain"}
|
|
| 149 |
/> |
|
| 150 |
</Animated.View> |
|
| 151 |
</PanGestureHandler> |
|
| 152 |
</Animated.View> |
|
| 153 |
</PinchGestureHandler > |
|
| 154 |
</GestureHandlerRootView> |
|
| 155 |
</View> |
|
| 130 | 156 |
</Modal> |
| 131 | 157 |
</View> |
| 132 | 158 |
// <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
|
Také k dispozici: Unified diff
re #10917: Zoomable Image, drag, zoom