如何在React Native（react-navigation 5）中禁用安卓返回键特定回退场景

Hey there, let's tackle these two Android back button issues with React Navigation 5 one by one!

If you want to stop the Android back button from navigating back to your app's home screen (or disable it entirely while on the home screen), you can use React Native's BackHandler alongside React Navigation's hooks. Here's a straightforward implementation:

import { BackHandler, useEffect } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  useEffect(() => {
    const handleBackPress = () => {
      // Returning true tells the system we've handled the back action, blocking default behavior
      return true;
    };

    // Register the back press listener
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      handleBackPress
    );

    // Clean up the listener when the component unmounts to avoid memory leaks
    return () => backHandler.remove();
  }, []);

  // Your home screen UI goes here
  return (
    {/* ... your component content */}
  );
}

This listener intercepts the hardware back press on the home screen. By returning true, you override the default navigation behavior—so pressing back won't take the user anywhere from the home screen.

For your specific use case where you don't want users to revert to Simple mode via the Android back button, here are two reliable approaches:

Approach 1: Block Back Press Based on Navigation History #

If your Pro mode has a root screen (like ProHomeScreen), you can listen for back presses here and block navigation if the intended previous route is part of Simple mode.

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

function ProHomeScreen() {
  const navigationState = useNavigationState(state => state);

  useEffect(() => {
    const handleBackPress = () => {
      // Get the name of the previous route in the stack
      const previousRouteName = navigationState.routes[navigationState.index - 1]?.name;
      
      // Block back press if the previous route is your Simple mode's root (e.g., 'SimpleHome')
      if (previousRouteName === 'SimpleHome') {
        return true;
      }
      // Allow normal back navigation for other Pro mode screens
      return false;
    };

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

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

  // Your Pro home screen UI goes here
  return (
    {/* ... your component content */}
  );
}

Approach 2: Reset the Navigation Stack When Switching to Pro Mode #

A cleaner way is to wipe the navigation stack when switching to Pro mode, so there's no Simple mode screen left in the history to navigate back to.

When the user taps the "Switch to Pro Mode" button, use navigation.reset() instead of navigation.navigate():

// In your Simple mode's root screen
function SimpleHomeScreen() {
  const navigation = useNavigation();

  const switchToPro = () => {
    // Reset the stack to only include the Pro mode root screen
    navigation.reset({
      index: 0,
      routes: [{ name: 'ProHome' }],
    });
  };

  return (
    <Button title="Switch to Pro Mode" onPress={switchToPro} />
  );
}

With this setup, the navigation stack only contains Pro mode screens—so pressing the Android back button won't take the user back to Simple mode. If you also want to prevent exiting the app from Pro mode, combine this with the BackHandler approach from the first question on your ProHomeScreen.

内容的提问来源于stack exchange，提问作者Dimitri Kopriwa