React Native Android端Page页面返回按钮无法禁用的问题求助

你当前的代码通过headerLeft: () => null隐藏了头部返回按钮，但Android端Page页面仍保留返回行为，是因为React Navigation对Android栈内页面的默认处理：当栈中存在多个页面时，系统会自动渲染头部返回按钮，同时允许物理返回键触发返回操作。仅设置headerLeft不足以完全禁用返回逻辑，需要补充以下配置：

方案一：全局禁用返回按钮+拦截物理返回键 #

修改headerOptions添加明确隐藏返回按钮的属性，同时通过BackHandler拦截Android物理返回键：

1. 先导入所需API：

import { BackHandler, useEffect } from 'react-native';

2. 修改App.js代码：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { BackHandler, useEffect } from 'react-native';

import Main from './js/screens/main';
import Page from './js/screens/page';

const Stack = createNativeStackNavigator();

const headerOptions = {
  headerLeft: () => null,
  headerBackVisible: false, // 明确隐藏返回按钮，覆盖Android默认逻辑
};

export default () => {
  // 拦截Android物理返回键
  useEffect(() => {
    const backAction = () => {
      return true; // 返回true表示拦截默认返回行为
    };

    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction
    );

    return () => backHandler.remove();
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={headerOptions}>
        <Stack.Screen name="Main" component={Main} />
        <Stack.Screen name="Page" component={Page} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

方案二：针对单个页面单独配置 #

如果仅需要禁用Page页面的返回按钮，可在对应Stack.Screen的options中单独设置：

<Stack.Screen
  name="Page"
  component={Page}
  options={{
    headerLeft: () => null,
    headerBackVisible: false,
  }}
/>

注意：该方案仍需搭配物理返回键拦截逻辑，否则用户按下Android物理返回键仍能回到Main页面。

补充说明 #

• headerBackVisible: false是Native Stack Navigator的专属属性，比headerLeft: () => null更可靠，能覆盖Android端的默认返回按钮渲染逻辑。
• 若需要根据页面动态控制返回行为，可结合useNavigationState获取栈状态：

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

// 在组件内部使用
const navigationState = useNavigationState(state => state);
const backAction = () => {
  // 仅当当前是Main页面或Page页面时拦截返回
  const currentPage = navigationState.routes[navigationState.index].name;
  return currentPage === 'Main' || currentPage === 'Page';
};

内容的提问来源于stack exchange，提问作者Chris B.