backAndroid/backHandler 适用于每个屏幕——React Native答案

【问题标题】：backAndroid/backHandler working for every screen--React NativebackAndroid/backHandler 适用于每个屏幕——React Native
【发布时间】：2018-06-21 16:35:39
【问题描述】：

我已启用 backandroid 以在主屏幕中显示注销警报。问题是即使屏幕导航离开主屏幕。仍然要注销警报。基本的后退导航也被禁用。

HomeScreen.js

 componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this._handleback);
}

componentWillUnmount() {
    //Forgetting to remove the listener will cause pop executes multiple times
    BackHandler.removeEventListener('hardwareBackPress', this._handleback);
}

 _handleback = () => {

    Alert.alert(i18N.t('alertHeader'), i18N.t('logoutqHeader'), [
        {
            text: i18N.t('yes'), onPress: () => { this.props.navigation.navigate('login'); }
        },
        { text: i18N.t('cancel'), onPress: () => { return true; }, style: 'cancel' },

    ], { cancelable: false });
    return true;

};

我只想在主屏幕中显示注销警报。在其他屏幕中，我想遵循基本的后退导航。请告诉我如何解决这个问题。

【问题讨论】：

标签： android reactjs react-native ecmascript-6

【解决方案1】：

一种解决方案是检查当前屏幕。在 _handleclick 中添加对 routeName 的检查。可以有更多的解决方案，但仅看这么多代码很难判断

_handleback = () => {
   //instead of home screen, add your routeName when you are on home screen 
   if(this.props.navigation.state.routeName === "homeScreen")
    Alert.alert(i18N.t('alertHeader'), i18N.t('logoutqHeader'), [
        {
            text: i18N.t('yes'), onPress: () => { this.props.navigation.navigate('login'); }
        },
        { text: i18N.t('cancel'), onPress: () => { return true; }, style: 'cancel' },

    ], { cancelable: false });
    return true;
 }
};

【讨论】：

如果此代码在主屏幕中。它会起作用吗。基本返回导航在其他屏幕上。
请检查，你要测试一下
当您在主屏幕上时，您的路线名称是什么。请通过安慰来检查
检查过了。给了同样的名字。仍然在其他屏幕上发出警报
我的方法工作正常。仅在一个页面上处理此问题的任何其他方式

【解决方案2】：

以下方法帮助我解决了它。

在主屏幕中，我通常像问题中一样包含警报。

对于其余的屏幕，我已经包含了导航的 goback()。

    componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', () => this.props.navigation.goBack());
}
componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', () => this.props.navigation.goBack());
}

通过这种方法，它实现了我在主屏幕显示警报并在其他屏幕返回的要求。

【讨论】：

你能解释一下你到底做了什么

【解决方案3】：

我刚刚在 useEffect 挂钩中添加了清理操作，它对我来说效果很好

useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", handleBackButton);
    return () => {
      BackHandler.removeEventListener("hardwareBackPress", handleBackButton);
    };
  }, [])

【讨论】：

【解决方案4】：

这是一个示例实现：

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

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

【讨论】：