@uiw/react-native/lib/ImageViewer/index.js

UIW for React Native

import React, { useState, useMemo, useRef, useEffect } from 'react';
import { StyleSheet, Dimensions, View, Image, Animated, TouchableOpacity } from 'react-native';
import TransitionImage from '../TransitionImage';
import MaskLayer from '../MaskLayer';
import Swiper from '../Swiper';
import Icon from '../Icon';
import { ActivityIndicator } from 'react-native';
export let ImageMainWidth = Dimensions.get('window').width;
export let ImageMainHeight = Dimensions.get('window').height;
import { PinchGestureHandler, } from 'react-native-gesture-handler';
const defaultImage = 'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg';
function ImageViewer(props) {
    const { width = 150, height = 150, src = defaultImage, defaultIndex = 0 } = props;
    const [index, setIndex] = useState(0);
    const [visible, setVisible] = useState(false);
    const [canVisible, setCanVisible] = useState(true);
    const fadeAnim = useRef(new Animated.Value(0)).current;
    const scale = useRef(new Animated.Value(1)).current; // 初始缩放比例为 1
    const lastScale = useRef(1); // 上一次的缩放比例
    const rotateAngle = useRef(new Animated.Value(0)).current; // 初始化旋转角度为 0
    const lastAngle = useRef(0); // 保存上次的旋转角度
    const onPinchGestureEvent = (event) => {
        if (event.nativeEvent.scale) {
            // 更新缩放比例
            scale.setValue(lastScale.current * event.nativeEvent.scale);
        }
    };
    const onPinchHandlerStateChange = (event) => {
        if (event.nativeEvent.oldState === 4 && event.nativeEvent.state === 5) {
            // 手势结束后，保存缩放比例
            lastScale.current *= event.nativeEvent.scale;
            scale.setValue(lastScale.current);
        }
    };
    const onRotate = () => {
        lastAngle.current += 90; // 旋转 90 度
        Animated.timing(rotateAngle, {
            useNativeDriver: true,
            toValue: lastAngle.current,
            duration: 250,
        }).start();
    };
    useEffect(() => {
        if (!visible) {
            fadeAnim.setValue(0);
            return;
        }
        Animated.timing(fadeAnim, {
            toValue: 1,
            duration: 600,
            useNativeDriver: true,
        }).start();
    }, [visible]);
    const imgUrl = useMemo(() => {
        if (Array.isArray(src)) {
            return src[defaultIndex].url;
        }
        return src;
    }, [src]);
    const PinchGestureHandlerChild = (url) => (<PinchGestureHandler onGestureEvent={onPinchGestureEvent} onHandlerStateChange={onPinchHandlerStateChange}>
      <Animated.View style={[
            {
                transform: [
                    { scale },
                    { rotate: rotateAngle.interpolate({ inputRange: [0, 360], outputRange: ['0deg', '360deg'] }) },
                ],
            },
            styles.imageContainer,
        ]}>
        <Image style={styles.image} source={{ uri: url }}/>
      </Animated.View>
    </PinchGestureHandler>);
    return (<View style={{}}>
      <TransitionImage style={{ width: width, height: height }} onPress={() => canVisible && setVisible(true)} source={{ uri: imgUrl }} PlaceholderContent={<ActivityIndicator />} transition={true} transitionDuration={500} onError={(e) => {
            if (e?.nativeEvent?.error)
                setCanVisible(false);
        }}/>
      <MaskLayer visible={visible} onDismiss={() => setVisible(false)} opacity={0.9}>
        {typeof src === 'string' ? (<View style={{ position: 'absolute', top: 50, right: 30 }}>
            <TouchableOpacity onPress={onRotate}>
              <Icon color="#fff" size={18} name="reload"/>
            </TouchableOpacity>
          </View>) : (<View />)}
        <Animated.View style={[styles.content, { opacity: fadeAnim }]}>
          {Array.isArray(src) ? (<Swiper dataSource={src} height={200} autoplay={false} index={index}/>) : (PinchGestureHandlerChild(imgUrl))}
        </Animated.View>
      </MaskLayer>
    </View>);
}
const styles = StyleSheet.create({
    content: {
        marginTop: ImageMainHeight / 3 - 20,
        height: ImageMainHeight / 3 - 20,
    },
    imageContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    image: {
        width: '100%',
        height: '100%',
        resizeMode: 'contain',
    },
});
export default ImageViewer;