React Native安卓返回键异常：首页按返回键需退至后台而非登录页

Hey there! Let's get that back button behavior sorted out for your app. Right now, pressing the Android back button on your Home screen takes you back to Login because two key issues are at play: the Login page is still lingering in your navigation stack, and your back button handler isn't set up properly to send the app to the background. Let's fix this step by step:

1. Clear the Login Screen from the Navigation Stack #

The main reason you're being sent back to Login is that the Login screen is still part of your navigation history. When you log in, we need to reset the stack so Home becomes the root screen (no going back to Login by default).

Update your Login.js home() method to use a stack reset instead of a regular navigation:

// First, import these at the top of Login.js
import { StackActions, NavigationActions } from 'react-navigation';

home() { 
  const { navigation } = this.props; 
  // Reset the entire stack to make Home the only screen in history
  const resetAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'Home', params: { name: 'Home' } })],
  });
  navigation.dispatch(resetAction);
}

This replaces the existing stack with just the Home screen, so the default back button won't have a Login screen to return to anymore.

2. Fix the Home Screen's Back Button Handler #

Your current Home screen code has a few small issues: you're using a deprecated lifecycle method, and the back button logic isn't doing what you need. Let's rewrite that part:

import React, { Component } from 'react';
import { BackHandler, Platform } from 'react-native';
// Add your other imports here

class Home extends Component {
  constructor(props) { 
    super(props); 
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this); 
  }

  componentDidMount() { 
    console.disableYellowBox = true; 
    console.log(this.props.navigation.state.routeName); 
    this.callapi();
    // Add the back button listener here (this is the correct lifecycle method)
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
  }

  componentWillUnmount() { 
    // Clean up the listener to avoid memory leaks
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick); 
  }

  handleBackButtonClick() { 
    // Only customize behavior if we're on the Home screen
    if (this.props.navigation.state.routeName === 'Home') {
      // For Android, returning true tells the system we've handled the back press
      // This will automatically minimize the app (send it to the background)
      if (Platform.OS === 'android') {
        return true;
      }
      // iOS doesn't have a hardware back button, so we can ignore it here
      return false;
    }
    // Let the system handle back presses for any other screens
    return false;
  }

  // Your existing callapi method
  callapi() {
    // ... your existing code here
  }

  render() {
    // ... your existing render code here
  }
}

export default Home;

Why this works: #

• We added the back button listener in componentDidMount (the recommended lifecycle method, since componentWillMount is deprecated).
• Returning true from the hardwareBackPress listener tells Android we've handled the event. Since Home is now the root screen, the system will minimize the app instead of navigating back.
• We clean up the listener in componentWillUnmount to prevent memory leaks.

3. Optional: Add a Double-Press to Exit (Common Android Pattern) #

If you want to follow the standard Android behavior where users press back twice to exit the app (instead of just minimizing), you can update the handleBackButtonClick method like this:

constructor(props) { 
  super(props); 
  this.handleBackButtonClick = this.handleBackButtonClick.bind(this); 
  this.exitTimer = null; // Track if the user pressed back recently
}

handleBackButtonClick() { 
  if (this.props.navigation.state.routeName === 'Home') {
    if (this.exitTimer) {
      // User pressed back twice within 2 seconds: exit the app
      BackHandler.exitApp();
      return true;
    }
    // Show a toast to remind the user
    ToastAndroid.show('Press back again to exit', ToastAndroid.SHORT);
    // Set a timer to reset the double-press check after 2 seconds
    this.exitTimer = setTimeout(() => {
      this.exitTimer = null;
    }, 2000);
    return true;
  }
  return false;
}

componentWillUnmount() { 
  BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
  // Clear the timer if it's still running
  if (this.exitTimer) clearTimeout(this.exitTimer);
}

Don't forget to import ToastAndroid from react-native if you use this option!

内容的提问来源于stack exchange，提问作者Ashish Sahu