react-native 返回键

这里主要介绍两种返回模式，一种是导航栏中的返回按钮，一种是监听android手机的返回键。这两种无论是哪种返回方式都需要使用
Navigator。

this.props.nav.pop();

1、监听android原生的返回键：BackAndroid

BackAndroid.addEventListener('hardwareBackPress',  ()=> {
    this.props.nav.pop(); // 返回上一页
    return true;
});

2、点击导航栏中的返回按钮返回。
在这里我将导航栏包装成了一个组件，所以在调用导航栏组件时需将 Navigator 传递过去：

图片.png

子组件导航栏中的返回键点击事件触发返回到上一页：

图片.png

像上面的一种返回方法，即监听android的返回键进行返回，我们如果在每一个字页面中都写这么一段代码着实过于冗余，所以我们可以去建一个 BaseComponent，在BaseComponent中 extents React.Component , 并在里面写上对于android返回键的监听，这样，需要监听返回键的子页面就可以 extends BaseComponent。

实现代码如下：
BaseComponent.js

import React, { Component } from 'react';
import { BackAndroid } from 'react-native';
class BaseComponent extends Component {
    constructor(props) {
        super(props);
        BackAndroid.addEventListener('hardwareBackPress',  ()=> {
            this.props.nav.pop();
            return true;
        });
    }
}
module.exports = BaseComponent;   // 这里需用这种方法，否则会报 super 的错

使用的时候先将其导进来：

import BaseComponent from '../../base/BackComponent';

export default class MapView extends BaseComponent {
    constructor(props) {
        super(props);
    }
｝

react-native 返回键

推荐阅读更多精彩内容