React Native 手势处理程序无法在 Android 上运行

Question

我正在使用react-native-gesture-handler 和react-native-reanimated 包在react native 中对视图进行动画处理。点击时视图的比例应增加，背景颜色应在点击时更改为红色。当我在网络上启动应用程序时一切正常，但在 Android 上我没有得到任何反馈。我使用零食在我的设备上发送代码，并且在我的 Android 设备上运行，但是当我在笔记本电脑上使用 expo-start 运行该项目时，手势处理根本不起作用。任何帮助都感激不尽 。该项目由世博会管理。

我正在使用react-native-reanimated版本“~2.3.1”，react-native-gesture-handler版本“2.1.0”；

//我的APP.JS文件

import "react-native-gesture-handler";
import { StyleSheet, Text, View } from "react-native";
import Animated,{useAnimatedGestureHandler, useAnimatedStyle, useSharedValue} from "react-native-reanimated";
import {  TapGestureHandler } from "react-native-gesture-handler";

export default function App() {

  const pressed= useSharedValue(false);

  const gestureEvent= useAnimatedGestureHandler({
    onStart:()=>{
     
     pressed.value=true
    },
    onActive:(e)=>{
      pressed.value=true;
    },
    onEnd:()=>{
      pressed.value=false;
    }
  });

  const animationStyle=useAnimatedStyle(()=>{
    return {
      transform:[{scale:pressed.value?1.3:1}],
      backgroundColor:pressed.value?"red":"yellow"
    }
  })



  return (
    <View style={styles.container}>
      <TapGestureHandler onGestureEvent={gestureEvent}  >
        <Animated.View style={[styles.view,animationStyle]}></Animated.View>
      </TapGestureHandler>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  view:{
    backgroundColor:"blue",
    width:100,
    height:100,
    borderRadius:20,
  }
});

// BABEL CONFIG.JS

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

点击时视图的比例应增加，背景颜色应在点击时更改为红色。当我在网络上启动应用程序时一切正常，但在 Android 上我没有得到任何反馈。我使用零食在我的设备上发送代码，并且在我的 Android 设备上运行，但是当我在笔记本电脑上使用 expo-start 运行该项目时，手势处理根本不起作用。

Answer 1

在你的等级制度中的某个地方吗<GestureHandlerRootView>？我注意到这在 iOS 中不是必需的，但在 Android 中是必需的。请参阅他们的文档。

Answer 2

包装你的整个应用程序

<GestureHandlerRootView style={{flex: 1}}>

</GestureHandlerRootView>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Flex: 1 很重要，没有它你的应用程序将无法检测 Android 上的手势。