Question

我已启用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;

};

我想仅在主屏幕上显示退出警报。在其他屏幕中，我想要遵循基本的后退导航。请让我知道如何解决这个问题。

Answer 1

以下方法帮我解决了。

在Homescreen中我通常会在问题中包含警报。

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

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

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

Answer 2

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

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

Answer 3

一种解决方案是检查当前屏幕。在_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;
 }
};

Answer 4

这是一个示例实现：

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

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

backAndroid / backHandler适用于每个屏幕 - React Native

4 个答案: