react-native-gesture-handler
を用いて、ピンチジェスチャを使った画像の拡大・縮小機能を実装しています。初回のジェスチャーによる画像の拡大には問題がないのですが、2回目以降の拡大時に画像が一時的に動いてしまうという問題が発生しています。
問題点
- 最初のピンチジェスチャによる画像拡大は問題なく機能します。
- しかし、2回目以降の拡大時に画像が一時的に移動してしまいます。この挙動は意図していないものです。
実装したコード
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>
);
}