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

要禁用Android设备后退按钮，您可以这样做，它将处理Back Press，只需在您的各自活动中添加这些方法： -

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;
    };

Answer 2

要在某些屏幕上禁用android硬件后退按钮，我们必须使用react-native本身的BackHandler，并且必须使用react-navigation的NavigationEvents引用。

import { BackHandler } from 'react-native';
import { NavigationEvents } from 'react-navigation';

_onBlurr = () => {
  BackHandler.removeEventListener('hardwareBackPress',
  this._handleBackButtonClick);
}

_onFocus = () => {
  BackHandler.addEventListener('hardwareBackPress', 
  this._handleBackButtonClick);
}

_handleBackButtonClick = () => true

render() {
  <View>
     <NavigationEvents
       onWillFocus={this._onFocus}
       onWillBlur={this._onBlurr}
     />
       {// Your View Here}
  </View>
}

参考： https://facebook.github.io/react-native/docs/backhandler https://reactnavigation.org/docs/en/navigation-events.html

Answer 3

你需要把它放在你的组件中：

  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', () => true);
  }, []);

然后按下后退按钮将被覆盖而不触发动作。

Answer 4

我使用useEffect在react native中导航。

useEffect(() => {
    const unsubscribe = BackHandler.addEventListener('hardwareBackPress', handleBackButton);

    return () => null
}, [])


export const handleBackButton = () => {
    ToastAndroid.show('Back button is pressed', ToastAndroid.SHORT);
    return true;
}

如果您不返回，它将在所有屏幕上禁用后退按钮。因此，请确保在屏幕从当前屏幕更改时卸载组件。

Answer 5

在使用功能组件时，这对我有用（在本示例中，我想从DetailService禁用硬件）

 import {useRoute, useFocusEffect} from '@react-navigation/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]),
  );
......

如何在某些屏幕中禁用Android后退按钮

5 个答案: