goBack在React导航中无法正常工作

Question

const RootNav = createStackNavigator(
  {
    Splash: {
        screen:Splash
    },
    BeforeLogin: {
        screen:BeforeLogin
    },    
    Signin: {
        screen:Signin,
    },
    Signup: {
        screen:Signup
    },
    Tabs: {
        screen:TabHolder,
    },
    ForgotPassword: {
        screen:ForgotPassword
    },
  } );

I'm using this componentWillMount in BeforeLogin screen. I want to close the app when user presses the android back button.

 componentWillMount() {          // In BeforeLogin Screen
   BackHandler.addEventListener('hardwareBackPress',() => {        
       BackHandler.exitApp(); 
     });  
  }

And in Signup and Signin screen, I'm using the below componentWillMount

componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress',() => {   

      this.props.navigation.goBack();
      return true;

    });
  } 

I cannot use this.props.navigation.navigate('BeforeLogin) because within Signin screen, I've a text Don't have account? Sign up now which navigates to Signup screen.

And a Already have account? Sign in now on my Signup screen which navigates to Signin Screen.

With all of the code I tried so far, I'm now unable to close the app when I press android back button from BeforeLogin screen.

I tried it with goBack(null) too, it takes me to the Splash screen when I press android back button from BeforeLogin` screen.

********************** Second alternative which also didn't work **********************

I used this.props.navigation.pop(1); in Signup and Signin Screen. It takes me to the Splash screen when I press android back button from BeforeLogin screen.

Please help.

UPDATED CODE

Please check the below link. It's the code to my question. https://gist.github.com/shubham6996/2c69f5a270d88c710ab61487639bf1af

Answer 1

In a screen from which you want to close screen afterwards after clicking (i assume in BeforeLogin):

constructor(props) {
    super(props);
    this._didFocusSubscription = props.navigation.addListener('didFocus', payload =>
      BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
    );
  }

  componentDidMount() {
    this._willBlurSubscription = this.props.navigation.addListener('willBlur', payload =>
      BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
    );
  }

  onBackButtonPressAndroid = () => {
BackHandler.exitApp();
return true;
}

You cannot rely on regular lifecycles of React in React Navigation due to how stacks navigation works there (in fact they are getting some lifecycles only once as they are still mounted underneth). So basically you need to rely on special events that are being sent by navigation itself.