React Native 手势处理程序不适用于 Android 模拟器或 Android 设备

Question

我正在尝试练习使用react-native-gesture-handler. 一切都渲染了，但我无法在屏幕上移动方块。我已经安装了react-native-reanimated适当的插件，清除了缓存并react-native-gesture-handler使用 expo 安装，但它在我的 Android 手机或 Android 模拟器上不起作用。有趣的是，它确实可以在网络浏览器上运行。以下是代码：

import {
    PanGestureHandler,
    PanGestureHandlerGestureEvent,
} from "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Animated, {
    useAnimatedGestureHandler,
    useAnimatedStyle,
    useSharedValue,
    withSpring,
} from "react-native-reanimated";

const SIZE = 100.0;
const CIRCLE_RADIUS = SIZE * 2;

type ContextType = {
    translateX: number;
    translateY: number;
};

export default function App() {
    const translateX = useSharedValue(0);
    const translateY = useSharedValue(0);

    const panGestureEvent = useAnimatedGestureHandler<
        PanGestureHandlerGestureEvent,
        ContextType
    >({
        onStart: (event, context) => {
            context.translateX = translateX.value;
            context.translateY = translateY.value;
        },
        onActive: (event, context) => {
            translateX.value = event.translationX + context.translateX;
            translateY.value = event.translationY + context.translateY;
        },
        onEnd: () => {
            const distance = Math.sqrt(translateX.value ** 2 + translateY.value ** 2);

            if (distance < CIRCLE_RADIUS + SIZE / 2) {
                translateX.value = withSpring(0);
                translateY.value = withSpring(0);
            }
        },
    });

    const rStyle = useAnimatedStyle(() => {
        return {
            transform: [
                {
                    translateX: translateX.value,
                },
                {
                    translateY: translateY.value,
                },
            ],
        };
    });

    return (
        <View style={styles.container}>
            <View style={styles.circle}>
                <PanGestureHandler onGestureEvent={panGestureEvent}>
                    <Animated.View style={[styles.square, rStyle]} />
                </PanGestureHandler>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
    square: {
        width: SIZE,
        height: SIZE,
        backgroundColor: "rgba(0, 0, 256, 0.5)",
        borderRadius: 20,
    },
    circle: {
        width: CIRCLE_RADIUS * 2,
        height: CIRCLE_RADIUS * 2,
        alignItems: "center",
        justifyContent: "center",
        borderRadius: CIRCLE_RADIUS,
        borderWidth: 5,
        borderColor: "rgba(0, 0, 256, 0.5)",
    },
});

为什么它无法在我的 Android 设备或 Android 模拟器上运行，但可以在网络浏览器上运行？我需要安装其他东西吗？先感谢您！

解决方案：如果您使用React Native CLI，则必须使用GestureHandlerRootView组件（来自react-native-gesture-handler）包装根组件。对于我的情况，需要进行以下更新：

<GestureHandlerRootView style={styles.container}>
           <View style={styles.circle}>
                <PanGestureHandler onGestureEvent={panGestureEvent}>
                    <Animated.View style={[styles.square, rStyle]} />
                </PanGestureHandler>
            </View>
<GestureHandlerRootView />

Answer 1

要使其在 Android 上运行，您必须将应用程序的入口点包装为<GestureHandlerRootView> 组件并从“react-native-gesture-handler”导入