反应本机硬件后退按钮不起作用答案

【问题标题】：React native hardware back button is not working反应本机硬件后退按钮不起作用
【发布时间】：2017-05-29 05:30:48
【问题描述】：

我正在开发 react native Android 并面临硬件后退按钮的问题我的 react native 版本是 0.44.2，我正在使用 BackHandler 下面是我的后退按钮代码：

BackHandler.addEventListener("hardwareBackPress", () => {
  if (this.navigator && this.navigator.getCurrentRoutes().length > 1){this.navigator.pop()
return true // do not exit app
} else {
return false // exit app
}})

我收到以下错误：

【问题讨论】：

根据您的图片，我认为 this.navigator 未定义。请检查一下。

标签： android react-native

【解决方案1】：

你需要使用BackAndroid React Native的API。

BackAndroid.addEventListener('hardwareBackPress', () => {

    var flag = false;

    if(_route.name==="newbooking"){
        Alert.alert(
            "Confirmation", 
            "Are you sure you want to cancel?",
            [
                {text: 'No', onPress: () => console.log('OK Pressed!')},
                {text: 'Yes', onPress: () => {_navigator.pop();}}
            ]
        );
        return true;
    }
    else{
        flag = true;
    }
    if (_navigator.getCurrentRoutes().length === 1  ) {
        return false;
    }
    if(flag){

        _navigator.pop();
        return true;
    }

});

【讨论】：

BackAndroid 已弃用。

【解决方案2】：

您可以使用React-Navigation 自动处理硬件后按。如果您将其用于导航。

【讨论】：

我目前使用 React-Navigation，当我按下应用程序关闭时。
@MichaelMalura 你在使用 TabNavigator 还是 StackNavigator ？

【解决方案3】：

创建新文件：

import {BackHandler} from 'react-native';
/**
 * Attaches an event listener that handles the android-only hardware
 * back button
 * @param  {Function} callback The function to call on click
 */
const handleAndroidBackButton = (callback: any) => {
    BackHandler.addEventListener('hardwareBackPress', () => {
        callback();
    });
};
/**
 * Removes the event listener in order not to add a new one
 * every time the view component re-mounts
 */
const removeAndroidBackButtonHandler = () => {
    BackHandler.removeEventListener('hardwareBackPress', () => {});
};
export {handleAndroidBackButton, removeAndroidBackButtonHandler};

并在您的主渲染文件 (app.tsx) 中添加以下代码：

  import {handleAndroidBackButton, removeAndroidBackButtonHandler} from "./utils/back-button.handler";
  public componentDidMount(): void {
        handleAndroidBackButton(false);
    }

【讨论】：

【解决方案4】：

import { BackHandler, View, Text, } from 'react-native';
import React, { Component } from 'react';

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

    componentDidMount() {
        try {
            BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
        }
        catch (e) {

        }
    };

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

        }
    };
    handleBackButtonClick() {
        try {
            this.props.navigation.navigate('Home');
            return true;
        }
        catch (e) {

        }
    };

    render() {
        return (
            <View style={{ flex: 1, textAlign: "center" }}>
                <Text>Hardware back button Example</Text>
            </View>
        )
    }
};

此解决方案对我有用。在----------------- 请在您要导航的位置添加您的屏幕名称。

【讨论】：