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

Question

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

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

      this.props.navigator.pop();

       return false;
   });

原文由 Neethi Ratawa 发布，翻译遵循 CC BY-SA 4.0 许可协议

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(); 。

Navigator pop 函数会将用户带到由 Navigator 呈现的上一个屏幕。

原文由 Jickson 发布，翻译遵循 CC BY-SA 4.0 许可协议