如何在某些屏幕上禁用android后退按钮

Question

我只想在某些页面中禁用android后退按钮。我使用以下代码：

  componentWillUnmount(){
      //For disabling the back button on cellphone
      BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
    }
    componentWillMount() {
         ParkToolbar.init( this );
    }

    //For disabling the back button on cellphone
    handleBackButton() {
        ToastAndroid.show('you cannot return', ToastAndroid.SHORT);
        return true;
    }

    componentDidMount() {
        toolbarActiveItem = this.state.user; 
        ParkToolbar.setActiveItem(this.props.navigation.state.params.activeSection);

        //For disabling the back button on cellphone
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
    }

问题是，当我在程序的一页（屏幕）中使用代码时，后退按钮将在应用程序每一部分的所有页面（屏幕）中禁用。您是否知道如何仅对单个页面（屏幕）禁用后退按钮的方式进行管理？

更新： 我还用BackAndroid测试了代码，并发生了相同的问题。

Answer 1

When using the functional components this is worked for me (in this example i wanted to disable hardware back from DetailService)

 import {useRoute, useFocusEffect} from '@react-navigation/native';
 import { BackHandler } from 'react-native'
  

 function DetailService(props) {
  const route = useRoute();
      
  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        if (route.name === 'DetailService') {
          return true;
        } else {
          return false;
        }
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);

      return () =>
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, [route]),
  );
......

Answer 2

To disable Android Device Back Button , you can do like this , It will handle Back Press , Just add These Methods inside your Respective Activity :-

import { BackHandler } from 'react-native';

    constructor(props) {
        super(props)
    }

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

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

    handleBackButtonClick = () => {
        this.props.navigation.goBack(null);
        return true;
    };