react-native 利用hoc处理android物理返回键

#描述

在react-antive中一般处理android物理返回键通常采取的的方式是写一个公用的类去处理，然后在你需要处理的地放实例化这个类然后调用相应的方法，还有就是直接在需要处理的地方通过BackHandler实现。其实这两种问题不大，但是感觉很麻烦，每次都要去监听，移除以及实现返回的逻辑，所以自然而然就想到了利用react的高阶组件来封装这一部分的公用逻辑，_hardwareBackPress()这个方法就负责处理返回键的回调，我这里调用了一个公共的返回的方法，这个地方注意的是，在使用的组件有自己的不一样的逻辑的地方完全可以覆盖重写这个方法就可以了，其他的不需要更多的操作。代码如下：

import React, {Component} from 'react';
import {BackHandler} from 'react-native'
import NavigationUtil from '../../utils/NavigationUtil';

export default (Comp)=>{

    return  class WithBackPress extends Component {
        constructor(props){
            super(props);
            this._hardwareBackPress=this._hardwareBackPress.bind(this)
        }
        componentDidMount() {
            /**
             * 监听android 物理返回键
             */
             BackHandler.addEventListener('hardwareBackPress', this._hardwareBackPress);
        }

        componentWillUnmount() {
            /**
             * 移除android 物理返回键
             */
            BackHandler.removeEventListener('hardwareBackPress', this._hardwareBackPress);
        }

        /**
         * 返回处理
         * @param e
         * @returns {boolean}
         * @private
         */
        _hardwareBackPress(e) {
            if(this.comp._hardwareBackPress){
                return this.comp._hardwareBackPress();
            }else {
                NavigationUtil.goBack(this.props.navigation);
                return true;
            }
        }
        render() {
            return <Comp ref={(comp)=>this.comp=comp} {...this.props}/>
        }
    }
}

##使用

import {createStackNavigator} from 'react-navigation';
import HomePage from '../pages/Main/HomePage';
import VideoDetailPage from '../pages/Main/VideoLearn/VideoDetailPage'
import ArticleDetailPage from '../pages/Main/Article/ArticleDetailPage'
import ExercisesDetailPage from '../pages/Main/Exercises/ExercisesDetailPage'
import TestManagementDetailPage from '../pages/Main/TestManagement/TestManagementDetailPage'
import SystemPage from '../pages/Main/BasePage/SystemPage'
import SearchPage from '../pages/Main/BasePage/SearchPage'
import IntegralPage from '../pages/Main/BasePage/IntegralPage'
import WithBackPress from '../components/Hoc/WithBackPress'
const MainNavigator = createStackNavigator({
    Home: {
        screen: HomePage,
    },
    VideoDetail: {
        screen:WithBackPress(VideoDetailPage) ,
    },
    ArticleDetail: {
        screen: WithBackPress(ArticleDetailPage),
    },
    ExercisesDetail: {
        screen: WithBackPress(ExercisesDetailPage),
    },
    TestManagementDetail: {
        screen: WithBackPress(TestManagementDetailPage),
    },
    Search: {
        screen: WithBackPress(SearchPage),
    },
    Integral: {
        screen: WithBackPress(IntegralPage),
    },
    System: {
        screen: WithBackPress(SystemPage),
    },
}, {
    initialRouteName:'Home',
    defaultNavigationOptions: {
        header: null,
    },
});
export default MainNavigator;

##如果需要在自己组件实现自己的回调逻辑在组件重写

 /**
     * android物理返回键回调（覆盖hoc中默认的回调）
     * @param e
     * @returns {boolean}
     * @private
     */
    _hardwareBackPress(e){
        this.props.navigation.goBack();
        return true
    }