Question

我一直在调查PanResponder。我目前的工作假设是，我会检测是否有两个向外移动的触摸，如果有，则增加onPanResponderMove函数中的元素大小。

这似乎是一种混乱的方式。有更顺畅的方式吗？

Answer 1

如果您只需要简单的缩放缩放功能，请使用ScrollView（doc here）

根据需要提供 maximumZoomScale （大于一）和 minimumZoomScale 。

Answer 2

除了查看Pan Responder之外，您还需要查看Gesture Responder System。

特别是响应者返回的evt。这是React-Native文档所说的。

evt is a synthetic touch event with the following form:

nativeEvent
    changedTouches - Array of all touch events that have changed         since the last event
    identifier - The ID of the touch
    locationX - The X position of the touch, relative to the element
    locationY - The Y position of the touch, relative to the element
    pageX - The X position of the touch, relative to the root element
    pageY - The Y position of the touch, relative to the root element
    target - The node id of the element receiving the touch event
    timestamp - A time identifier for the touch, useful for velocity calculation
    touches - Array of all current touches on the screen

现在您可以了解触摸的区域/物体，并相应地调整项目。

Answer 3

注意：此答案与平移响应器无关，但解决了主要问题，即如何在本机中实现捏放大。

使用Expo或React-Native而不使用expo，可以从react-native-gesture-handler导入PinchGestureHandler。这里还有其他手势处理程序：react-native-gesture-handler

import { PinchGestureHandler } from 'react-native-gesture-handler';

在示例中，假设我们使用的是摄像头，我们想检测缩放的压力：

<PinchGestureHandler
    onGestureEvent={this.onPinchGestureEvent}
  >
    <View>
          <Camera
              type={cameraType}
              flashMode={flashMode}
              zoom={zoom}
              style={styles.preview}
              ref={camera => this.camera = camera}
          />
    </View>
        </PinchGestureHandler>

然后我们可以对手势事件采取行动，如下所示：

   onPinchGestureEvent = event => {
      console.log(event.nativeEvent.scale);
    }

Answer 4

您需要使用Gesture Responder System。

简单的捏合和缩放手势需要平移和缩放。

要计算您希望存储触摸事件并使用触摸位置增量的翻译和比例因子。

我已经编写了一个NPM模块来执行此操作。

react-native-pinch-zoom-responder

Answer 5

我已经为react-native-svg做了一个平移和缩放组件： https://snack.expo.io/@msand/zoomablesvg-v2.0.2

https://github.com/msand/zoomable-svg/blob/master/index.js

支持子视图中的视图框变换和按下/捣蛋器。

你如何在react-native中实现双指缩放？

5 个答案: