使用react-native-gesture-handler对图

import React, { Component } from 'react'
import {
    View,
    Image,
    FlatList,
    StyleSheet,
    PanResponder,
    Animated
} from 'react-native';
import { observer } from 'mobx-react/native';
import {
    PinchGestureHandlerGestureEvent,
    State,
    PinchGestureHandler,
    PanGestureHandler
} from "react-native-gesture-handler";
import _ from 'lodash';

//确认识别的页面
@observer
export default class ConfirmRecognitPage extends Component {

    USE_NATIVE_DRIVER = true;
    //手势动画组件的ref引用
    panRef = React.createRef();
    pinchRef = React.createRef();

    constructor(props) {
        super(props)
        const { navigation: { getParam } } = props;
        this.callback = getParam('callback')

        this.state = {
            data: getParam('data'),
            serialNo: getParam('serialNo'),
        }

        //缩放
        this.baseScale = new Animated.Value(1);// 基础缩放
        this.pinchScale = new Animated.Value(1);// 手指缩放的值
        this.scale = Animated.multiply(this.baseScale, this.pinchScale);// 缩放值 = 基础缩放 * 手指缩放的值
        this.lastScale = 1;// 将pinch 完成之后的缩放值
        this.onPinchGestureEvent = Animated.event(
            [{ nativeEvent: { scale: this.pinchScale } }],
            { useNativeDriver: this.USE_NATIVE_DRIVER }
        );
        //移动
        this.translateX = new Animated.Value(0);
        this.translateY = new Animated.Value(0);
        this.lastOffset = { x: 0, y: 0 };
        this.onPanGestureEvent = Animated.event(
            [
                {
                    nativeEvent: {
                        translationX: this.translateX,
                        translationY: this.translateY,
                    },
                },
            ],
            { useNativeDriver: this.USE_NATIVE_DRIVER }
        );
    }

    //缩放事件
    onPinchHandlerStateChange = (
        event: PinchGestureHandlerStateChangeEvent
    ) => {
        if (event.nativeEvent.oldState === State.ACTIVE) {
            this.lastScale *= event.nativeEvent.scale;
            this.baseScale.setValue(this.lastScale);
            this.pinchScale.setValue(1);
        }
    };

    //移动事件
    onPanHandlerStateChange = (event: PanGestureHandlerStateChangeEvent) => {
        if (event.nativeEvent.oldState === State.ACTIVE) {
            this.lastOffset.x += event.nativeEvent.translationX;
            this.lastOffset.y += event.nativeEvent.translationY;
            this.translateX.setOffset(this.lastOffset.x);
            this.translateX.setValue(0);
            this.translateY.setOffset(this.lastOffset.y);
            this.translateY.setValue(0);
        }
    };

    render() {
        /**
        * 动画
        */
        const animation = [{
            transform: [
                { scale: this.scale },
                { translateY: this.translateY },
                { translateX: this.translateX }
            ],
        }];
        return (
            <SafeAreaView style={styles.container}>
                <View style={styles.flexCenter}>
                    <PanGestureHandler
                        ref={this.panRef}
                        minDist={5}
                        minPointers={1}
                        maxPointers={5}
                        onGestureEvent={this.onPanGestureEvent}
                        onHandlerStateChange={this.onPanHandlerStateChange}>
                        <Animated.View style={styles.flexCenter}>
                            <PinchGestureHandler
                                ref={this.pinchRef}
                                simultaneousHandlers={this.panRef}
                                focalX={0}
                                focalY={0}
                                onGestureEvent={this.onPinchGestureEvent}
                                onHandlerStateChange={this.onPinchHandlerStateChange}>
                                <Animated.View style={animation}>
                                    <Image
                                        style={{ width: ScreenUtils.width, height: ScreenUtils.width }}
                                        source={{
                                            uri: this.state.data.uri,
                                            priority: FastImage.priority.normal,
                                        }}
                                        resizeMode={FastImage.resizeMode.contain}
                                    />
                                </Animated.View>
                            </PinchGestureHandler>
                        </Animated.View>
                    </PanGestureHandler>

                </View>
            </SafeAreaView >
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.gray_F9F
    },
    rowCenter: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    flexCenter: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },

})