这里主要介绍两种返回模式，一种是导航栏中的返回按钮，一种是监听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);
}
｝
网友评论