处理Android中的React Native,Navigator中的后退button

我在Android反应本机应用程序中有一个Navigator

我正在使用navigator.push()导航到不同的页面。 看起来很自然,后退button将popup导航器并返回一页,但这不是发生了什么事情(它退出应用程序)。

做反应原生Navigator真的没有后退button的支持,我需要用BackAndroid自己BackAndroid吗?

Solutions Collecting From Web of "处理Android中的React Native,Navigator中的后退button"

是的,你必须自己处理后退button。 我认为这样做的主要原因是你可能想用后退button做不同的事情,而不是只是回到堆栈。 我不知道是否有计划在未来纳入buttonfunction。

除了上面的回答,处理代码应该是这样的

 var navigator; React.BackAndroid.addEventListener('hardwareBackPress', () => { if (navigator && navigator.getCurrentRoutes().length > 1) { navigator.pop(); return true; } return false; }); 

在呈现代码中:

 <Navigator ref={(nav) => { navigator = nav; }} /> 

不知道什么时候API改变,但作为反应原生0.31(也可能是早期的版本)BackAndroid是一个组件,必须从react-native导入:

import {..., BackAndroid} from 'react-native'

另外一定要删除componentWillUnmount上的监听器:

 componentWillUnmount(){ BackAndroid.removeEventListener('hardwareBackPress', () => { if (this.navigator && this.navigator.getCurrentRoutes().length > 1) { this.navigator.pop(); return true; } return false; }); } 

*更新:在反应原生0.44这个模块已被重命名为BackHandlerNavigator也被正式弃用,但仍然可以在这里find: https : //github.com/facebookarchive/react-native-custom-components

 import { BackHandler } from 'react-native'; 

别忘了绑定[这个]

正确答案应该是:

 export default class MyPage extends Component { constructor(props) { super(props) this.navigator = null; this.handleBack = (() => { if (this.navigator && this.navigator.getCurrentRoutes().length > 1){ this.navigator.pop(); return true; //avoid closing the app } return false; //close the app }).bind(this) //don't forget bind this, you will remember anyway. } componentDidMount() { BackAndroid.addEventListener('hardwareBackPress', this.handleBack); } componentWillUnmount() { BackAndroid.removeEventListener('hardwareBackPress', this.handleBack); } render() { return ( <Navigator ref={navigator => {this.navigator = navigator}} ... 

为了使用我的知识和以前的答案来清理代码,下面是它的样子:

 import { ..., Navigator, BackAndroid } from 'react-native'; componentDidMount() { BackAndroid.addEventListener('hardwareBackPress', this.handleBack); } componentWillUnmount() { //Forgetting to remove the listener will cause pop executes multiple times BackAndroid.removeEventListener('hardwareBackPress', this.handleBack); } handleBack() { if (this.navigator && this.navigator.getCurrentRoutes().length > 1){ this.navigator.pop(); return true; //avoid closing the app } return false; //close the app }