

`react-native-gesture-
handler`を用いて、ピンチジェスチャを使った画像の拡大・縮小機能を実装しています。初回のジェスチャーによる画像の拡大には問題がないのですが、2回目以降の拡大時に画像が一時的に動いてしまうという問題が発生しています。

**問題点**

  * 最初のピンチジェスチャによる画像拡大は問題なく機能します。
  * しかし、2回目以降の拡大時に画像が一時的に移動してしまいます。この挙動は意図していないものです。

**挙動のデモ**  
[![画像の説明をここに入力](https://i.stack.imgur.com/SoEji.gif)](https://i.stack.imgur.com/SoEji.gif)

**実装したコード**

[code]

    import React from 'react';
    import {Dimensions, StyleSheet} from 'react-native';
    import {
      Gesture,
      GestureDetector,
      GestureHandlerRootView,
    } from 'react-native-gesture-handler';
    import Animated, {
      useAnimatedStyle,
      useSharedValue,
    } from 'react-native-reanimated';
    import {SafeAreaProvider} from 'react-native-safe-area-context';
    
    const {width: wWidth} = Dimensions.get('window');
    
    export default function App() {
      const scale = useSharedValue(1);
      const savedScale = useSharedValue(1);
      const originX = useSharedValue(0);
    
      const zoomGesture = Gesture.Pinch()
        .onStart(event => {
          originX.value = event.focalX - wWidth / 2;
        })
        .onUpdate(event => {
          scale.value = savedScale.value * event.scale;
        })
        .onEnd(() => {
          const newScale = scale.value;
          savedScale.value = newScale;
        });
    
      const animatedStyle = useAnimatedStyle(() => {
        return {
          transform: [
            {translateX: originX.value},
            {scale: scale.value},
            {translateX: -originX.value},
          ],
        };
      });
    
      return (
        <GestureHandlerRootView style={styles.container}>
          <SafeAreaProvider style={styles.container}>
            <GestureDetector gesture={zoomGesture}>
              <Animated.Image
                source={require('./assets/kabigon.png')}
                onLayout={event => {
                  console.log('event', event.nativeEvent.layout);
                }}
                style={[styles.image, animatedStyle]}
              />
            </GestureDetector>
          </SafeAreaProvider>
        </GestureHandlerRootView>
      );
    }
    
[/code]


CC BY-SA 4.0
2023-11-16T11:52:57.100
96801
2023-11-16T11:57:05.080
2023-11-16T11:57:05.080
54128
54128
question
react-native
React Native Gesture Handlerでのピンチジェスチャによる画像拡大時の挙動に問題