代码之家 › 专栏 › 技术社区 › Tim Lewis

使用警报响应本机-后台处理程序

react-navigation react-native android javascript

Tim Lewis · 技术社区 · 6 年前

import React, { Component } from "react";
import { Alert, BackHandler } from "react-native";

export default class Dashboard extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {

        BackHandler.addEventListener("hardwareBackPress",this.handleBackPress);
    }

    componentWillUnmount() {
        BackHandler.removeEventListener("hardwareBackPress", this.handleBackPress);
    }

    handleBackPress() {
        Alert.alert(
            "Logout",
            "Are you sure you want to logout?",
            [
                {
                    text: "Cancel",
                    onPress: () => {
                        console.log("Cancel Pressed");
                    },
                    style: "cancel"
                },
                { text: "Logout", onPress: () => this.handleLogout() }
            ],
            { cancelable: false }
        );
    }

    handleLogout() {
        this.props.navigation.navigate("Login");
    }
}

正如你们所看到的,在挂载更改时,我正在绑定和解除绑定“hardwareBackPress”到 this.handleBackPress .bind(this) ,否则我会

当我在警报中按注销时。预期功能是:

按下后退按钮
功能已禁用(不导航)
将显示警报
按下Ok键
上一屏幕上的“后退”按钮具有默认操作

但实际情况是:

按下后退按钮
返回
(后续步骤无关紧要)

我注意到我没有 return true; 我生命中的任何地方 handleBackPress() ,所以我补充说:

handleBackPress() {
    Alert.alert(
        "Logout",
        "Are you sure you want to logout?",
        [
            {
                text: "Cancel",
                onPress: () => {
                    console.log("Cancel Pressed");
                },
                style: "cancel"
            },
            {
                text: "Logout",
                onPress: () => {
                    return this.handleLogout();
                }
            }
        ],
        { cancelable: false }
    );

    return true;
}

但现在发生的是:

功能已禁用(不导航)
将显示警报
按下Ok键
在上一屏幕上按下后退按钮将显示警报

我已经证实了这一点 componentDidUnmount() 调用,但它似乎没有删除事件侦听器。

以前有人遇到过这个问题吗?现在,我只是通过在应用程序的入口点添加这个处理程序来全局禁用后退按钮,但这不是一个长期的解决方案。

componentDidMount() {
    this.backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
        Alert.alert("Logout", "Are you sure you want to logout?", [{ text: "Cancel", onPress: () => {}, style: "cancel" }, { text: "Logout", onPress: () => this.handleLogout() }], { cancelable: false });
        return true;
    });
}

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

componentDidUnmount()

按下后退按钮
功能已禁用(不导航)
不出现警报

我要导航到的屏幕上的“后退”按钮被覆盖,并且似乎不能很好地适应这个替代生命周期。将尝试在所有后续屏幕上实施不同的方法;然后看看它是否正常工作。

1 回复 | 直到 6 年前

Tim Lewis 6 年前

使用文档中的生命周期替代方案( https://facebook.github.io/react-native/docs/backhandler )似乎以警觉和冷静的态度处理奇怪的行为 return true;

Dashboard.js

componentDidMount() {
    this.backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
        Alert.alert("Logout", "Are you sure you want to logout?", [{ text: "Cancel", onPress: () => {}, style: "cancel" }, { text: "Logout", onPress: () => this.handleLogout() }], { cancelable: false });
        return true;
    });
}

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

handleLogout() {
    global.screenName = "Dashboard";
    return this.props.navigation.navigate("Login");
}

只要需要覆盖后退按钮的所有后续屏幕也使用相同的逻辑:

Detail.js (堆栈导航器中的后续屏幕):

componentDidMount() {
    this.backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
        return this.props.navigation.navigate("Dashboard");
    });
}

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