Expo Go触摸手势失效但网页端正常的解决方法

问题现象 #

使用npx expo start --tunnel启动应用时，网页端卡片的滑动切换、点击翻转动画均正常工作；但在Expo Go中打开应用，仅能显示卡片，所有触摸操作无响应，卡片无法滑动或翻转。

核心问题排查 #

1. 手势处理未正确初始化 #

react-native-deck-swiper依赖react-native-gesture-handler处理滑动手势，但Expo环境中未用GestureHandlerRootView包裹根组件，导致原生手势无法被识别。

2. 触摸组件层级冲突 #

卡片外层的TouchableWithoutFeedback拦截了Swiper组件的滑动手势，导致swiper无法响应触摸操作。

3. 代码笔误导致的显示异常 #

卡片背面绑定的card.turkish属性在flashcards数组中不存在，实际应为card.english，虽不直接影响触摸，但会导致功能异常。

4. Reanimated配置缺失 #

使用useNativeDriver: true的动画需要在babel配置中添加Reanimated插件，否则动画可能无法正常触发或阻塞手势响应。

分步解决方案 #

步骤1：配置GestureHandlerRootView #

由于项目使用Expo Router，需在根布局文件app/_layout.js中添加GestureHandlerRootView包裹整个应用：

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack />
    </GestureHandlerRootView>
  );
}

步骤2：调整触摸组件层级 #

将TouchableWithoutFeedback替换为Pressable并移至卡片内部，避免拦截swiper的滑动手势：
修改index.js中renderCard部分：

renderCard={(card) => (
  <View style={styles.cardContainer}>
    <Pressable onPress={flipCard} style={styles.cardPressable}>
      <Animated.View style={[styles.card, frontAnimatedStyle]}>
        <Text style={styles.text}>{card.german}</Text>
      </Animated.View>
      <Animated.View style={[styles.card, styles.cardBack, backAnimatedStyle]}>
        <Text style={styles.text}>{card.english}</Text> {/* 修正属性名 */}
      </Animated.View>
    </Pressable>
    {label !== '' && (
      <View style={label === 'TRUE' ? styles.correctLabel : styles.wrongLabel}>
        <Text style={styles.labelText}>{label}</Text>
      </View>
    )}
  </View>
)}

在styles中添加cardPressable样式：

cardPressable: {
  width: '100%',
  height: '100%',
  borderRadius: 8,
},

步骤3：配置Reanimated Babel插件 #

修改babel.config.js，添加Reanimated插件：

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

步骤4：清理无用依赖 #

移除未使用的react-native-swipe-gestures依赖，避免手势冲突：

npm uninstall react-native-swipe-gestures

验证步骤 #

1. 重启Expo开发服务器：npx expo start --clear
2. 在Expo Go中重新加载应用
3. 测试卡片滑动和点击翻转功能

内容的提问来源于stack exchange，提问作者Gokhan