GoBack() 与 Android 硬件返回按钮和 componentDidMount()

Question

首先，对不起我的英语。

我正在尝试使用 React Navigation 和 BackHandler 处理硬件 android 后退按钮。但是，我不能真正使用 goBack() 反应导航功能。

所以，我得到了一个类 androidBackButton.js：

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

const handleAndroidBackButton = callback => {
BackHandler.addEventListener('hardwareBackPress', () => {
callback();
return true;
});
};

const removeAndroidBackButtonHandler = () => {
BackHandler.removeEventListener('hardwareBackPress', () => {});
}

const exitAlert = () => {
Alert.alert(
"Quitter l'application",
"Êtes vous sûr de vouloir quitter l'application ?",
[
{text: 'Non', style: 'cancel'},
{text: 'Oui', onPress: () => BackHandler.exitApp()},
]
);
};

export {handleAndroidBackButton, removeAndroidBackButtonHandler, exitAlert};

要使用它，我在这样的屏幕中使用 componentDidMount 和 componentWillUnmount ：

componentDidMount() {
handleAndroidBackButton(this.props.navigation.goBack());
}

componentWillUnmount() {
removeAndroidBackButtonHandler();
}

但是.. 就像你肯定知道的那样，我不能在 componentDidMount 中调用道具，因为我会收到一个警告，即“无法对未安装的组件执行 React State 更新。”。即使仅在我按下 android 硬件后退按钮时调用该操作，它也会在我加载组件时尝试定义它。所以，这行不通。

顺便说一句，我试着这样定义它：

componentDidMount() { handleAndroidBackButton(() => {this.props.navigation.goBack()}); }

通过这种方式，不会显示任何警告。但是当我点击硬件按钮时，什么都没有发生..

所以是的，有人知道发生了什么？有没有办法在不产生任何错误的情况下实现这一点？

非常感谢！

Answer 1

尝试像 RN 示例中那样更改您的代码：

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

  componentWillUnmount() {
    this.backHandler.remove()
  }

 handleBackPress = () => {
    this.props.navigation.goBack(); // React Navigation goBack
    return true;
  }

https://facebook.github.io/react-native/docs/backhandler.html

Answer 2

继续我最后的评论；

这是我的导航器：

import React, { Component } from "react";
import HomeScreen from "./HomeScreen.js";
import SideBar from "../SideBar/SideBar.js";
import LoginScreen from "../LoginScreen/LoginScreen.js";
import KoustSettings from "../Settings/Settings.js";
import OrderScreen from "../OrderScreen/OrderScreen.js";
import CreateOrder from "../OrderScreen/CreateOrderScreen.js";
import CompleteOrder from "../OrderScreen/CompleteOrderScreen.js";

import FileScreen from "../FileScreen/FileScreen.js";
import InventoryScreen from "../InventoryScreen/InventoryScreen.js";
import { View, Image } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';

const RootDrawer = createDrawerNavigator(
  {
    Login: { screen: LoginScreen },
    Accueil: { screen: HomeScreen },
    Commandes: { screen: OrderScreen },
    Inventaires: { screen: InventoryScreen },
    Recettes: { screen: FileScreen },
    Settings: {screen: KoustSettings},
    CreateOrder: {screen: CreateOrder},
    CompleteOrder: {screen: CompleteOrder}
  },
  {
    contentComponent: props => <SideBar {...props} />,
    unmountInactiveRoutes: true
  }
);
export default createAppContainer(RootDrawer);

也许只有 stackNavigator 可以很好地使用 goBack() ？