添加手势

Add GestureHandlerRootView

To get gesture interactions to work in the app, we'll render <GestureHandlerRootView> from react-native-gesture-handler at the top of Index component. Replace the root level <View> component in the app/(tabs)/index.tsx with <GestureHandlerRootView>.

!!!IG9!!!

!!!IG0!!!

Use animated components

An Animated component looks at the style prop of the component and determines which values to animate and apply updates to create an animation. Reanimated exports animated components such as <Animated.View>, <Animated.Text>, or <Animated.ScrollView>. We will apply animations to the <Animated.Image> component to make a double tap gesture work.

1. Open the EmojiSticker.tsx file in the components directory. Inside it, import Animated from the react-native-reanimated library to use animated components.
2. Replace the Image component with <Animated.Image>.

!!!IG10!!!

!!!IG1!!!

For a complete reference of the animated component API, see React Native Reanimated documentation.

Add a tap gesture

React Native Gesture Handler allows us to add behavior when it detects touch input, like a double tap event.

In the EmojiSticker.tsx file:

1. Import Gesture and GestureDetector from react-native-gesture-handler.
2. To recognize the tap on the sticker, import useAnimatedStyle, useSharedValue, and withSpring from react-native-reanimated to animate the style of the <Animated.Image>.
3. Inside the EmojiSticker component, create a reference called scaleImage using the useSharedValue() hook. It will take the value of imageSize as its initial value.

!!!IG2!!!

Creating a shared value using the useSharedValue() hook has many advantages. It helps to mutate data and runs animations based on the current value. We can access and modify the shared value using the .value property. We'll create a doubleTap object to scale the initial value and use Gesture.Tap() to animate the transition while scaling the sticker image. To determine the number of taps required, we'll add numberOfTaps().

Create the following object in the EmojiSticker component:

!!!IG3!!!

To animate the transition, let's use a spring-based animation. This will make it feel alive because it's based on the real-world physics of a spring. We will use the withSpring() function provided by react-native-reanimated.

On the sticker image, we'll use the useAnimatedStyle() hook to create a style object. This will help us to update styles using shared values when the animation happens. We'll also scale the size of the image by manipulating the width and height properties. The initial values of these properties are set to imageSize.

Create an imageStyle variable and add it to the EmojiSticker component:

!!!IG4!!!

Next, wrap the <Animated.Image> component with the <GestureDetector> and modify the style prop on the <Animated.Image> to pass the imageStyle.

!!!IG11!!!

!!!IG5!!!

In the above snippet, the gesture prop takes the value of the doubleTap to trigger a gesture when a user double-taps the sticker image.

Let's take a look at our app on Android, iOS and the web:

For a complete reference of the tap gesture API, see the React Native Gesture Handler documentation.

Add a pan gesture

To recognize a dragging gesture on the sticker and to track its movement, we'll use a pan gesture. In the components/EmojiSticker.tsx:

1. Create two new shared values: translateX and translateY.
2. Replace the <View> with the <Animated.View> component.

!!!IG12!!!

!!!IG6!!!

Let's learn what the above code does:

• The translation values defined will move the sticker around the screen. Since the sticker moves along both axes, we need to track the X and Y values.
• In the useSharedValue() hooks, we have set both translation variables to have an initial position of 0. This is the sticker's initial position and a starting point. This value sets the sticker's initial position when the gesture starts.

In the previous step, we triggered the onStart() callback for the tap gesture chained to the Gesture.Tap() method. For the pan gesture, specify an onChange() callback, which runs when the gesture is active and moving.

1. Create a drag object to handle the pan gesture. The onChange() callback accepts event as a parameter. changeX and changeY properties hold the change in position since the last event. and update the values stored in translateX and translateY.
2. Define the containerStyle object using the useAnimatedStyle() hook. It will return an array of transforms. For the <Animated.View> component, we need to set the transform property to the translateX and translateY values. This will change the sticker's position when the gesture is active.

!!!IG7!!!

Next, inside the JSX code:

1. Update the <EmojiSticker> component so that the <GestureDetector> component becomes the top-level component.
2. Add the containerStyle on the <Animated.View> component to apply the transform styles.

!!!IG13!!!

!!!IG8!!!

`

Let's take a look at our app on Android, iOS and the web: