为React Native防止硬件后退按钮android

Question

我想阻止用户返回上一个屏幕.所以我添加了代码,但这不起作用.这有什么解决方案吗？可以看到警报弹出,但"返回false"不起作用.

componentDidMount() {
   BackAndroid.addEventListener('hardwareBackPress', () => {
     Alert.alert("alert","alert")

      this.props.navigator.pop();

       return false;
   });

Answer 1

如果要禁用默认的后退按钮行为,则需要返回true.

这是一个示例组件,它将阻止用户返回上一个屏幕.

import React, {Component,} from 'react';
import {
    View,
    Text,
    BackHandler,
    ToastAndroid,
} from 'react-native';

class BackButtonDemo extends Component {
    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
    }

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

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

    render() {
        return (
            <View>
                <Text>Back button example</Text>
            </View>
        );
    }
}

module.exports = BackButtonDemo;

注意:

也this.props.navigator.pop();从您的解决方案中删除.

Navigatorpop功能会将用户带到之前呈现的屏幕Navigator.

Answer 2

使用react hooks 的闪亮新实现：

import React, {Component, useEffect} from 'react';
import {
    View,
    Text,
    BackHandler,
} from 'react-native';

const LogInView = () => {

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

    return (
        <View>
            <Text>Back button example</Text>
        </View>
    );
}

export default LoginView

Answer 3

我通过在App.js中添加此代码来禁用整个应用程序的后退按钮(android)

componentDidMount() {
  BackAndroid.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
  BackAndroid.removeEventListener('hardwareBackPress', this.handleBackButton);
}

handleBackButton() {
  return true;
}

别忘了导入BackAndroid

import {BackAndroid} from 'react-native'

Answer 4

因此，当每个人都在使用React-Native的 Backhandler 时，我尝试使用React-navigation来防止返回处理程序。这对我有用。如果您只是想防止返回而不向用户显示或提醒任何内容。

React.useEffect(() => {
        navigation.addListener('beforeRemove', (e) => {
            e.preventDefault();
        });
    }, [navigation]);

您可以将此代码放入您的功能组件中。

使用案例：

在用户注册中，当用户注册并转到代码确认屏幕时，我们不希望他回来，您现在可以使用此代码。

Answer 5

如果您使用反应定型，则需要使用BackHandler而不是BackAndroid

import { BackHandler } from 'react-native';

// code

componentDidMount() {
  BackHandler.addEventListener('backPress');
}

// some more code

componentWillUnmount() {
  BackHandler.removeEventListener('backPress');
}

Answer 6

通过返回true尝试此禁用后退按钮

import {BackAndroid} from 'react-native';

componentWillMount() {
   BackAndroid.addEventListener('hardwareBackPress', () => {return true});
} 

Answer 7

只是为了在使用react-navigation时给你一个完整的答案：

如果您使用的是 react-navigation，请将以下内容放在您的RootNavigation 类中，而不是 App.js 中，以禁用整个应用程序的后退按钮。

import { BackHandler } from 'react-native';

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressed);
}

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

onBackButtonPressed() {
    return true;
}

Answer 8

using the BackHandler from react native worked for me. Just include this line in your ComponentWillMount:

BackHandler.addEventListener('hardwareBackPress', function() {return true})

it will disable back button on android device.

Answer 9

硬件后退按钮 OnClick OnBackPressed 回调被调用

您可以在 onBackPressed 回调中删除 super 声明。

 @Override
    public void onBackPressed() {

    }