在 React Native 层禁止 iOS 左滑返回（手势返回/手势退出）

Winson℡2025-09-05 23:53

在 React Native 层禁止 iOS 左滑返回（手势返回/手势退出）通常有两种方式：

方法 1：在 react-navigation 中配置
如果你用的是 react-navigation（最常见）：

javascript 复制代码

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

const Stack = createStackNavigator();

export default function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          // 禁用 iOS 左滑返回手势
          gestureEnabled: false,
        }}
      />
      <Stack.Screen
        name="Detail"
        component={DetailScreen}
        options={{
          gestureEnabled: false,
        }}
      />
    </Stack.Navigator>
  );
}

gestureEnabled: false 就能禁止 iOS 左滑返回。
只想在某些页面禁止，就在对应的 Screen 上配置。

方法 2：在 react-native-screens 里配置

如果项目启用了 react-native-screens（enableScreens()），可以在 screen 级别禁用

javascript 复制代码

import { Screen } from 'react-native-screens';

<Screen
  style={{ flex: 1 }}
  gestureEnabled={false} // 禁止左滑
>
  <YourComponent />
</Screen>

方法 3：完全禁止（全局）

如果希望整个 App 都禁用 iOS 左滑：

javascript 复制代码

<Stack.Navigator screenOptions={{ gestureEnabled: false }}>
  {/* 所有页面都禁用左滑 */}
</Stack.Navigator>

gestureEnabled: false 只影响手势返回，不影响上方返回按钮（导航栏返回箭头）。

如果你还想禁用返回按钮，需要在 headerLeft: () => null 或 headerBackVisible: false 配置。

行为区别

iOS

默认开启左滑返回手势（gestureEnabled: true），设置 false 后禁用。

Android

没有左滑返回手势，Android 返回依赖物理返回键 / 导航栏返回。

所以这个配置在 Android 上不会有任何影响，不会禁用物理返回键，也不会影响 navigation.goBack()。

推荐且显著有效的：方法一