防止React Back Native的硬件后退按钮android [英] Preventing hardware back button android for React Native

问题描述

我想防止用户返回上一个屏幕.所以我添加了代码，但这行不通.有什么解决方案吗?可以看到弹出的警报，但返回false"无效.

I want to prevent the user from going back to the previous screen. So I added code, but this does not work. Are there any solutions for this? The alert pop up is seen but "return false" does not work.

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

      this.props.navigator.pop();

       return false;
   });

推荐答案

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

You need to return true, if you want to disable the default back button behavior.

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

Here is a sample component which will block the user from going back to previous screen.

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

Also remove this.props.navigator.pop(); from your solution.

Navigator弹出功能会将用户带到Navigator呈现的上一个屏幕.

Navigator pop function will take the user to the previous screen rendered by Navigator.

这篇关于防止React Back Native的硬件后退按钮android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！