嵌套在Top Tab Navigator中的Stack Navigator侧滑返回行为异常

该问题是Top Tab Navigator默认横向滑动切换标签的手势，与子Stack Navigator侧滑返回手势触发范围重叠，父导航器默认优先响应手势导致的，可通过以下三种方案解决： #

方案1：动态控制Top Tab的滑动开关（最常用，兼容双手势需求） #

仅当子Stack Navigator处于根页面（栈深度为1）时，才允许Top Tab响应横向滑动切换标签的手势，Stack栈内有其他页面时自动禁用Tab滑动，将手势交给子导航器处理。
示例代码如下：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function TopTabsNavigator() {
  return (
    <Tab.Navigator
      // 动态配置swipeEnabled属性
      swipeEnabled={({ route }) => {
        // 对应嵌套Stack的Tab页单独判断
        if (route.name === 'Screen 2') {
          const stackState = route.state;
          // Stack无状态或处于根页面（index为0）时才允许Tab滑动
          return !stackState || stackState.index === 0;
        }
        // 其他Tab页保持原有滑动逻辑
        return true;
      }}
    >
      <Tab.Screen name="Screen 1" component={BottomNavigator} />
      <Tab.Screen name="Screen 2" component={NestedStackNavigator} />
    </Tab.Navigator>
  )
}

方案2：完全禁用Top Tab滑动切换（最简单） #

如果业务不需要横向滑动切换Top Tab的功能，直接全局禁用Top Tab的滑动手势，所有侧滑手势会自动交由子导航器处理：

<Tab.Navigator
  swipeEnabled={false}
>
  {/* 原有Tab配置 */}
</Tab.Navigator>

方案3：调整手势响应优先级 #

如果需要同时保留Top Tab滑动和Stack侧滑返回功能，可通过调整Stack的手势响应参数，让侧滑返回手势优先被Stack捕获：

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function NestedStackNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        // 调整侧滑手势的响应偏移量，优先捕获横向滑动手势
        gestureHandlerProps: {
          activeOffsetX: [-10, 10],
          failOffsetY: [-5, 5]
        }
      }}
    >
      <Stack.Screen name="Screen 2.1" component={Screen21} />
      <Stack.Screen name="Screen 2.2" component={Screen22} />
    </Stack.Navigator>
  )
}

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