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

在 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()。

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

相关推荐
wangruofeng6 小时前
AI 助力 Flutter 3.27 升级到 3.38 完整指南:两周踩坑与实战复盘
flutter·ios·ai编程
iOS日常1 天前
Xcode 垃圾清理
ios·xcode
yuki_uix1 天前
Props、Context、EventBus、状态管理:组件通信方案选择指南
前端·javascript·react.js
牛奶1 天前
React 底层原理 & 新特性
前端·react.js·面试
牛奶1 天前
React 基础理论 & API 使用
前端·react.js·面试
小呆呆_小乌龟1 天前
同样是定义对象,为什么 TS 里有人用 interface,有人用 type?
前端·react.js
开心就好20251 天前
不越狱能抓到 HTTPS 吗?在未越狱 iPhone 上抓取 HTTPS
后端·ios
傅里叶1 天前
iOS相机权限获取
flutter·ios
代码小学僧1 天前
为什么我推荐前端项目都应该使用 TanStack Query 管理接口请求
前端·react.js·axios
不会敲代码11 天前
React 受控组件与非受控组件完全指南
前端·react.js