使用一键式 React Native 实现捏缩放

Question

我想在 react native 中使用单指触摸来实现捏合手势（缩放）。 ![图像侧面有四个箭头。需要使用单点触摸实现捏合缩放][1]

https://i.stack.imgur.com/ykqSb.png

Answer 1

您可以使用 react-native-gesture-handler 来实现这一点。我只是写了一些代码。首先长按角会显示要拖动的指示器，然后拖动会改变图像的比例。我没有完成所有功能，只是向您展示一些逻辑。也许你应该自己完成！

https://snack.expo.io/@gwl002/onetouchzoom

同样代码的世博小吃

import { StatusBar } from 'expo-status-bar';
import React, { useState, useRef } from 'react';
import { StyleSheet, Text, View, Image, Alert, Animated } from 'react-native';
import 'react-native-gesture-handler';
import { TapGestureHandler, PanGestureHandler, LongPressGestureHandler, State } from 'react-native-gesture-handler';

export default function App() {
  const [dirButton, setDirButton] = useState(null);
  const imgLongPress = useRef();
  const imgPan = useRef();
  const scaleAnim = new Animated.Value(1);

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <LongPressGestureHandler
        ref={imgLongPress}
        simultaneousHandlers={imgPan}
        onHandlerStateChange={({ nativeEvent }) => {
          if (nativeEvent.state === State.ACTIVE) {
            let { x, y } = nativeEvent;
            let buttonPosition = "";
            console.log(x, y);
            if (x < 30 && y < 30) {
              buttonPosition = "topLeft";
            } else if (x > 370 && y < 30) {
              buttonPosition = "topRight";
            } else if (x < 30 && y > 370) {
              buttonPosition = "bottomLeft";
            } else if (x > 370 && y > 370) {
              buttonPosition = "bottomRight";
            } else {
              buttonPosition = null
            }
            setDirButton(buttonPosition)
          }
        }}
        minDurationMs={800}
      >
        <PanGestureHandler
          ref={imgPan}
          simultaneousHandlers={imgLongPress}
          onGestureEvent={({ nativeEvent }) => {
            if (dirButton) {
              console.log(nativeEvent)
              let { x, y } = nativeEvent;
              if (dirButton === "topRight" || dirButton === "bottomRight") {
                scaleAnim.setValue(x / 400)
              } else if (dirButton === "topLeft" || dirButton === "bottomLeft") {
                scaleAnim.setValue((400 - x) / 400)
              }
            }
          }}
        >
          <View style={styles.wrapper}>
            <Animated.Image
              source={require("./assets/test.png")}
              style={[
                { width: 400, height: 400 },
                {
                  transform: [
                    { scale: scaleAnim }
                  ]
                }
              ]}
            />
            <View
              style={[styles.indicator, dirButton ? styles[dirButton] : { width: 0, height: 0 }]}
            >

            </View>
          </View>
        </PanGestureHandler>
      </LongPressGestureHandler>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 100,
    backgroundColor: '#fff',
  },
  wrapper: {
    position: "relative",
  },
  indicator: {
    width: 30,
    height: 30,
    backgroundColor: "blue",
    position: "absolute"
  },
  topLeft: {
    left: 0,
    top: 0
  },
  topRight: {
    right: 0,
    top: 0
  },
  bottomLeft: {
    left: 0,
    bottom: 0,
  },
  bottomRight: {
    right: 0,
    bottom: 0
  }
});