在 React Native 层禁止 iOS 左滑返回(手势返回/手势退出)
在 React Native 层禁止 iOS 左滑返回(手势返回/手势退出)通常有两种方式:
- 方法 1:在 react-navigation 中配置
- 如果你用的是 react-navigation(最常见):
import { createStackNavigator } from '@react-navigation/stack';const Stack = createStackNavigator();export default function AppNavigator() {return (<Stack.Navigator><Stack.Screenname="Home"component={HomeScreen}options={{// 禁用 iOS 左滑返回手势gestureEnabled: false,}}/><Stack.Screenname="Detail"component={DetailScreen}options={{gestureEnabled: false,}}/></Stack.Navigator>);
}
- gestureEnabled: false 就能禁止 iOS 左滑返回。
- 只想在某些页面禁止,就在对应的 Screen 上配置。
方法 2:在 react-native-screens 里配置
如果项目启用了 react-native-screens(enableScreens()),可以在 screen 级别禁用
import { Screen } from 'react-native-screens';<Screenstyle={{ flex: 1 }}gestureEnabled={false} // 禁止左滑
><YourComponent />
</Screen>
方法 3:完全禁止(全局)
如果希望整个 App 都禁用 iOS 左滑:
<Stack.Navigator screenOptions={{ gestureEnabled: false }}>{/* 所有页面都禁用左滑 */}
</Stack.Navigator>
gestureEnabled: false 只影响 手势返回,不影响上方返回按钮(导航栏返回箭头)。
如果你还想禁用返回按钮,需要在 headerLeft: () => null 或 headerBackVisible: false 配置。
行为区别
iOS
默认开启左滑返回手势(gestureEnabled: true),设置 false 后禁用。
Android
没有左滑返回手势,Android 返回依赖物理返回键 / 导航栏返回。
所以这个配置在 Android 上 不会有任何影响,不会禁用物理返回键,也不会影响 navigation.goBack()。
推荐且显著有效的:方法一