这里主要介绍两种返回模式,一种是导航栏中的返回按钮,一种是监听android手机的返回键。这两种无论是哪种返回方式都需要使用
Navigator。
this.props.nav.pop();
1、监听android原生的返回键:BackAndroid
BackAndroid.addEventListener('hardwareBackPress', ()=> {
this.props.nav.pop(); // 返回上一页
return true;
});
2、点击导航栏中的返回按钮返回。
在这里我将导航栏包装成了一个组件,所以在调用导航栏组件时需将 Navigator 传递过去:
子组件导航栏中的返回键点击事件触发返回到上一页:
像上面的一种返回方法,即监听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);
}
}