web-dev-qa-db-ja.com

react-nativeでピンチズームをどのように実装しますか？

私はPanResponderを調べてきました。私の現在の作業仮説は、外側に移動している2つのタッチがあるかどうかを検出し、ある場合は、onPanResponderMove関数の要素サイズを増やすというものです。

これは面倒な方法のようです。よりスムーズな方法はありますか？

iosreactjsreact-nativeimage-zoom
9
Aspen

単純なピンチズーム機能のみが必要な場合は、ScrollViewを使用してください（ ここにドキュメント ）

必要に応じて、maximumZoomScale（1より大きい）とminimumZoomScaleを指定するだけです。

8
Rahul

パンレスポンダーを見るだけでなく、 ジェスチャレスポンダーシステム も見る必要があります。

特に、レスポンダーから返される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

タッチができたので、タッチされている領域/オブジェクトを特定し、それに応じてアイテムを調整できます。

2
Zidail

私はreact-native-svgのコンポーネントをパンおよびズームするためのピンチを作成しました： https://snack.expo.io/@msand/zoomablesvg-v2.0.2

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

子のビューボックス変換とプレス/パンハンドラーのサポート付き。

0
msand

Gesture Responder System を使用する必要があります。

単純なピンチおよびズームジェスチャには、平行移動とスケーリングが必要です。

移動係数と倍率を計算するには、タッチイベントを保存し、タッチ位置のデルタを使用します。

これを行うNPMモジュールを作成しました。

react-native-pinch-zoom-responder

0
brendan