react-navigation v2 后退按钮关闭应用程序

Question

我遇到了一个非常奇怪的问题，应用程序一直运行良好，升级到 react-navigation v2 后开始出现问题。

应用内的任何位置，Android 上的后退按钮会关闭应用并将其移回暂停的应用。

我在手动处理后退行为、降级某些软件包等方面尝试了很多方法，但都没有奏效。

这是我的 package.json 文件：

Answer 1

我遇到了同样的问题，这些是我发现的： https://github.com/react-navigation/react-navigation/issues/4329 和 https://github.com/expo/expo/issues/1786

提到了一个临时解决方案，即将firebase降级到5.0.3，这对我有用。

Answer 2

问题在于 npm firebase 包。有两种方法可以解决此问题。

1. 如其他答案中所述，将 firebase 降级到 5.0.3

2. 更改导入 firebase 的方式。这种方法会很多 更轻松。 使用：

   import firebase from "@firebase/app";
   import "firebase/auth";
   import "firebase/database";
   

   不要使用import * as firebase from "firebase";或import firebase from "firebase";

更多详情请见this GitHub issue。

Answer 3

降级 Firebase 的解决方案也对我有用，但我不得不降级到 Firebase 4.13.1，就像 5.0.3 一样，我仍然面临这个问题。

Answer 4

如果您使用的是 react-navigation v2，请查看 this documentation。

您也可以使用react-navigation-backhandler 来获得易于使用的解决方案。

Answer 5

转换此导入语句解决了我的问题

import Firebase from '@firebase/app' // The issue got fixed after adding @
import 'firebase/auth'
import 'firebase/database'
import 'firebase/storage'

如果没有@，后退按钮会从应用程序中退出用户

Answer 6

我也遇到了同样的问题，好像Backhandler.android.js的实现不正确，你可以在这里找到文件node_modules/react-native/Libraries/Utilities/BackHandler.android.js ，在这个文件中 const subscriptions = Array.from(_backPressSubscriptions.values()).reverse();一段代码总是返回一个长度为 0 的数组，这就是为什么 invokeDefault 变量总是保持为真并关闭应用程序，您可以通过自己的实现处理后退按钮行为来修复它。

在导航服务中添加此方法

import { NavigationActions, StackActions } from 'react-navigation';*

let navigator;
  function setTopLevelNavigator(navigatorRef) {
    navigator = navigatorRef; 
  }

  function pop() {
    navigator.dispatch(StackActions.pop());
  }

    export default {
     pop,
     setTopLevelNavigator
  };

你需要在你的 app.js 中设置顶级导航器，比如这个 int 渲染方法的返回语句

<AppNavigator //Replace it with your navigator
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
        onNavigationStateChange={(prevState, currentState) => {
          this.setState({ currentState });
        }}
/>

要处理后退按钮功能，请在您的 app.js 中添加这些内容

同时导入 NavigationService

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

在 componentDidMount 中添加这些

  componentDidMount() {
   BackHandler.addEventListener('hardwareBackPress', this.handleHardwareBack);
  }

在componentWillUnmount中添加这些

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

现在处理硬件返回按钮

  handleHardwareBack = () => {
if (!isUndefined(this.state.currentState)) {
  const mainRouteIndex = this.state.currentState.index;
  const mainRoute = this.state.currentState.routes[mainRouteIndex];
  const subRouteIndex = mainRoute.index;

  if (subRouteIndex === 0) {
    console.log(
      'the screen name is ----> ',
      mainRoute.routes[subRouteIndex].routeName
    );
    this.toggleExitModal(); //you can place any dialog if you want to show
    return true;
  }

  NavigationService.pop();
  return true;
}
console.log('Back Button is handled in the respective page seperately');
};

return true 表示我们将手动处理后退按钮功能，return false 将导致退出应用程序，默认情况下它是硬件后退按钮关闭应用程序:(

希望对你有帮助

Answer 7

我使用的是 firebase 5.5.5，我的导航没有任何问题，我认为您需要创建堆栈导航器才能正确使用后退按钮，我已经给出了一个示例。页面也被导入了，我还没有附上屏幕导入代码

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';

  const Drawer = createDrawerNavigator(
    {
        BrowseQuestion: BrowseQuestion,
        BrowseCategory: BrowseCategory,

    }

  );

  const Loginstack = createStackNavigator({
    Login: LoginScreen,
    Forgot: ForgotPassword,
    Signup: SignupScreen,
  })


  export default createSwitchNavigator({
    Login : Loginstack,
    Account: Drawer,
   },
   {
    initialRouteName: 'Login'
   }
  );