如何禁用react-native-gesture-handler/Swipeable左滑手势以避免导航冲突？

方案1：通过导航手势状态控制Swipeable禁用状态 #

核心思路是监听顶部Tab的切换手势状态，在切换过程中禁用列表项的Swipeable组件，避免手势冲突。

1. 在消息页组件中，通过导航事件监听Tab切换的开始和结束：

import { useNavigation } from '@react-navigation/native';
import { useState, useEffect } from 'react';
import { Swipeable, FlatList, View, TouchableOpacity, Text } from 'react-native';

const MessagesScreen = () => {
  const navigation = useNavigation();
  const [isTabSwiping, setIsTabSwiping] = useState(false);
  const conversations = [/* 你的对话数据 */];

  useEffect(() => {
    const handleGestureStart = () => setIsTabSwiping(true);
    const handleGestureEnd = () => setIsTabSwiping(false);

    const gestureStartListener = navigation.addListener('gestureStart', handleGestureStart);
    const gestureEndListener = navigation.addListener('gestureEnd', handleGestureEnd);

    return () => {
      gestureStartListener();
      gestureEndListener();
    };
  }, [navigation]);

  const renderItem = ({ item }) => (
    <Swipeable
      disabled={isTabSwiping}
      renderRightActions={() => (
        <View style={{ flexDirection: 'row' }}>
          <TouchableOpacity style={{ padding: 15, backgroundColor: '#ccc' }}>
            <Text>静音</Text>
          </TouchableOpacity>
          <TouchableOpacity style={{ padding: 15, backgroundColor: '#ff4444' }}>
            <Text>删除</Text>
          </TouchableOpacity>
        </View>
      )}
      onSwipeableOpen={() => console.log('Swipeable opened')}
    >
      <View style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
        <Text>{item.title}</Text>
      </View>
    </Swipeable>
  );

  return <FlatList data={conversations} renderItem={renderItem} keyExtractor={(item) => item.id} />;
};

方案2：限制Swipeable的滑动方向与触发阈值 #

通过配置Swipeable的滑动方向和最小触发距离，让导航的左滑手势优先触发：

<Swipeable
  direction="right" // 仅响应右滑手势，左滑不会触发组件回调
  minimumThreshold={50} // 设置右滑触发的最小距离，小于该值的滑动会被导航手势捕获
  renderRightActions={() => (
    <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity style={{ padding: 15, backgroundColor: '#ccc' }}>
        <Text>静音</Text>
      </TouchableOpacity>
      <TouchableOpacity style={{ padding: 15, backgroundColor: '#ff4444' }}>
        <Text>删除</Text>
      </TouchableOpacity>
    </View>
  )}
  onSwipeableOpen={() => console.log('Swipeable opened')}
>
  <View style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
    <Text>{item.title}</Text>
  </View>
</Swipeable>

方案3：利用GestureDetector处理手势优先级 #

借助react-native-gesture-handler的手势API，明确左滑返回的优先级高于Swipeable的手势：

import { GestureDetector, Gesture } from 'react-native-gesture-handler';

const renderItem = ({ item }) => {
  // 创建左滑手势，优先级高于Swipeable
  const leftSwipeGesture = Gesture.Pan()
    .direction(Gesture.DIRECTION_LEFT)
    .onBegin(() => navigation.goBack())
    .runOnJS(true);

  return (
    <GestureDetector gesture={leftSwipeGesture}>
      <Swipeable
        renderRightActions={() => (
          <View style={{ flexDirection: 'row' }}>
            <TouchableOpacity style={{ padding: 15, backgroundColor: '#ccc' }}>
              <Text>静音</Text>
            </TouchableOpacity>
            <TouchableOpacity style={{ padding: 15, backgroundColor: '#ff4444' }}>
              <Text>删除</Text>
            </TouchableOpacity>
          </View>
        )}
      >
        <View style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
          <Text>{item.title}</Text>
        </View>
      </Swipeable>
    </GestureDetector>
  );
};

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