ReactNavigation V2 监听物理返回键

首先导入BackHandler组件

import {
    BackHandler,
} from 'react-native';

在构造函数中监听,并在willunmount中取消它

constructor(props) {
        super(props);
        this.state = {};
        BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
    }

...

    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
        console.log('home Screen will unmount')
    }

监听方法：
返回true从onBackButtonPressAndroid我们已经处理了该事件，监听器将不会被调用，因此没有弹出屏幕表示。
返回false将导致事件冒泡并且react-navigation的侦听器将弹出屏幕。
这些代码我放到了StackNavigator中的第一个路由中,如果第一个路由是BottomTabNavigator则放在BottomTabNavigator中的第一个路由中。

    onBackButtonPressAndroid = () => {
        let {navigation} = this.props; 
        if (navigation.isFocused()) {

            if (this.lastPressAndroidBack && this.lastPressAndroidBack + 2000 >= Date.now()) {
                return false
            }
            this.lastPressAndroidBack = Date.now();
            ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
            return true

        }
        return false;
    };

完整代码

/**
 * Created by 卓原 on 2018/7/4.
 *
 */

import React from 'react';
import {
    View,
    Text,
    Button,
    BackHandler,
    ToastAndroid,
    Share,
    StatusBar
} from 'react-native';

import LoadingState from 'MOBX/LoadingState';
import * as ScreenUtil from 'js/utils/ScreenUtil.js'
import NavigationBar from "../common/NavigationBar";
import Colors from "../utils/Colors";

export default class HomeScreen extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            animating: false
        };
        BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)

    }

    componentDidMount() {


    }


    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
        console.log('home Screen will unmount')
    }


    render() {

        return (
            <View
                style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <StatusBar backgroundColor={Colors.statusColorGreen}/>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Set"
                    onPress={() => this.props.navigation.navigate('Settings')}
                />
                <Button
                    title="ShowLoading"
                    onPress={() => {
                        this._show()
                    }}
                />

            </View>
        );
    }


    _show = () => {
        LoadingState.show()

        //this.setState({animating: true}, console.log(this.state.animating))
        setTimeout(() => LoadingState.hide(), 3000)
    };

    onBackButtonPressAndroid = () => {
        let {navigation} = this.props;
        if (navigation.isFocused()) {

            if (this.lastPressAndroidBack && this.lastPressAndroidBack + 2000 >= Date.now()) {
                return false
            }
            this.lastPressAndroidBack = Date.now();
            ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
            return true

        }
        return false;
    };
}

ReactNavigation V2 监听物理返回键

猜你喜欢