React Native中ReanimatedSwipeable左滑操作无法点击问题求助

问题核心 #

使用react-native-gesture-handler/ReanimatedSwipeable组件时，左滑显示的操作容器按钮无法触发点击事件，但切换到已废弃的react-native-gesture-handler/Swipeable组件则正常工作。

解决方案 #

Reanimated驱动的Swipeable组件需要使用react-native-gesture-handler提供的触摸组件处理交互，原生react-native的TouchableOpacity会被手势拦截导致点击失效。

步骤1：导入正确的触摸组件 #

将TouchableOpacity从react-native-gesture-handler导入，而非react-native：

import { TouchableOpacity } from 'react-native-gesture-handler';

步骤2：修改动作组件代码 #

确保所有操作按钮都使用Gesture Handler的触摸组件，以下是修改后的完整代码：

import React from 'react';
import { View, Text, Alert, StyleSheet } from 'react-native';
import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
import { GestureHandlerRootView, TouchableOpacity } from 'react-native-gesture-handler';

const SwipeableItem = () => {
  const renderRightActions = () => (
    <TouchableOpacity
      style={styles.actionContainer}
      onPress={() => Alert.alert('Action Clicked!', 'You clicked the right action')}
    >
      <Text style={styles.actionText}>Click 2 Me</Text>
    </TouchableOpacity>
  );

  const renderLeftActions = () => (
    <TouchableOpacity
      style={{
        width: 100,
        height: 80,
        backgroundColor: 'green',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
      }}
      onPress={() => Alert.alert('Action Clicked!', 'You clicked the left action')}
    >
      <Text style={styles.actionText}>Click 1 Me</Text>
    </TouchableOpacity>
  );

  return (
    <GestureHandlerRootView style={styles.container}>
      <Swipeable
        renderRightActions={renderRightActions}
        renderLeftActions={renderLeftActions}
      >
        <View style={styles.swipeItem}>
          <Text style={styles.itemText}>Swipe Left to Reveal</Text>
        </View>
      </Swipeable>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
  },
  swipeItem: {
    width: 300,
    height: 80,
    backgroundColor: 'grey',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  itemText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  actionContainer: {
    width: 100,
    height: 80,
    backgroundColor: '#FF5733',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  actionText: {
    color: '#FFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default SwipeableItem;

额外排查点 #

1. 检查Reanimated配置：确保babel.config.js中已添加Reanimated插件：

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

添加后需重启Metro服务器。

2. 版本兼容性：当前使用的react-native-gesture-handler@2.21.2和react-native-reanimated@3.16.3版本兼容，若问题仍存在，可尝试降级到稳定匹配版本。

3. 手势冲突：若页面存在其他手势组件，需确保Swipeable的手势优先级正确，可通过simultaneousHandlers属性调整。

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