ボタンではなく、gesture handlerで円を拡大したい。
①まずは、タップすると円が大きくなるようにしたい。
これについては、下記のサンプルコード参照。
Handling gestures | React Native Reanimated
②ピンチして、円を大きくしたい。
これもサンプルコードあるが、なぜかエラーがでたので下記のように書き直しました。
Pinch gesture | React Native Gesture Handler
App.js
import { StyleSheet } from "react-native";
import {
Gesture,
GestureDetector,
GestureHandlerRootView,
} from "react-native-gesture-handler";
import Animated, {
useSharedValue,
useAnimatedStyle,
} from "react-native-reanimated";
export default function App() {
const scale = useSharedValue(1);
const savedScale = useSharedValue(1);
const pinchGesture = Gesture.Pinch()
return (
<GestureHandlerRootView style={styles.container}>
<GestureDetector gesture={pinchGesture}>
<Animated.View style={[styles.box, animatedStyle]} />
</GestureDetector>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffffff",
alignItems: "center",
justifyContent: "center",
},
box: {
height: 120,
width: 120,
backgroundColor: "#b58df1",
borderRadius: 20,
marginBottom: 30,
},
});
③ 図形をドラッグにて移動したい
下記HP参照
React Native Pan Gesture with gesture-handler - YouTube
*1:e) => {
})
.onEnd(() => {
});
const animatedStyle = useAnimatedStyle(() => ({
}
