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的导航问题就基本解决了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,143评论 25 709
  • 1.使用BackAndroid组件来完成对android物理返回键的监听 如下图,我们再Home组件中注册,一旦A...
    木中木阅读 5,468评论 0 1
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,276评论 4 61
  • 在我的印象里,搓澡是北方特有的。还记得10岁那年坐火车来南方,妈妈跟爸爸说要带多几块搓澡巾,这边没得卖。在火车要到...
    小粉面子阅读 1,396评论 10 18
  • 老罗(罗永浩)在最近几次锤子科技新品发布会上,当介绍最新款的手机时都会说: “少废话,先看东西。” 我们就先来看下...
    梅晨斐阅读 2,865评论 3 11