React native：Android 设备后退按钮

Question

我在 android 设备的后退按钮上遇到了一个问题。当我登录应用程序并转到主屏幕并从主屏幕时，如果我按下设备返回按钮，那么它会再次重定向到我的登录屏幕而不是背景。

请帮助我在应用程序成功登录应用程序（即从主屏幕）后按返回按钮时应用程序如何进入后台状态。

这是我的代码，

Login.js

//Click on login button call this method
  home()
  {
    const { navigate } = this.props.navigation;
    navigate('Home', { name: 'Home'});

  }

Home.js：

constructor(props) {
    super(props)
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}

componentWillMount()
{
  console.disableYellowBox = true;
  console.log(this.props.navigation.state.routeName);

    this.callapi();
  }

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}

handleBackButtonClick() {
  if (this.props.navigation.state.routeName == 'Home') {
  //  this.props.navigation.goBack(null);
//  BackHandler.exitApp()
this.props.navigation.dispatch(resetAction)
    }
    return false;

}

Answer 1

这是因为当登录返回 true 时，您将用户推送到主页。您必须重置路由器的堆栈。

我个人使用 Wix 的react-native-navigation，从未使用过react-navigation。但是通过查看他们的文档，它表明您可以通过添加此代码块来重置堆栈：

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Profile'})
  ]
})
this.props.navigation.dispatch(resetAction)

更多信息可以找到here