react-native对android物理返回键back的监听以及基类封装

这个需求主要是为了解决android端物理返回键的监听的，ios用户请绕道而行。

先看封装的代码：

/**
 * 所有组件的基类
 * 实现android端物理返回键的监听
 */
import React, {Component} from 'react';
import {
    BackAndroid,
    Platform,
} from 'react-native';

export default class BaseComponent extends Component {

    constructor(props) {
        super(props);
    }
    componentWillMount() {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener("back", this.onBackClicked);
        }else {

        }
    }

    componentWillUnmount() {
        if (Platform.OS === 'android') {
            BackAndroid.removeEventListener("back", this.onBackClicked);
        }else {
            this.propstManger.addLengeData(this.props.navigator.getCurrentRoutes().length);
        }
    }

    //返回 ;//return  true 表示返回上一页  false  表示跳出RN
    onBackClicked = () => { // 默认 表示跳出RN
        return false;
    }

    /*
     //复制此方法到 继承该组件的地方即可 

     //BACK物理按键监听
     onBackClicked = () => {
         const {navigator} = this.props;
         if (navigator && navigator.getCurrentRoutes().length > 1) {
             navigator.pop();
             return true;//true 表示返回上一页
         }
         return false; // 默认false  表示跳出RN
     }
     */

}

用法如下：

import React, {Component} from 'react';
import {
    ...
    Navigator,
    ...
} from 'react-native';
import BaseComponent from '文件路径';

export default class Reading extends BaseComponent {
 onBackClicked = () => {
         const {navigator} = this.props;
         if (navigator && navigator.getCurrentRoutes().length > 1) {
             navigator.pop();
             return true;//true 表示返回上一页
         }
         return false; // 默认false  表示跳出RN
     }
}

这样就完成了。为什么会有属性navigator属性，请看巧用导航navigator。结合这一篇文章，navigator的导航问题就基本解决了。