处理Android上的React Native,Navigator中的后退按钮

Question

我有一个NavigatorAndroid反应原生应用程序.

我正在使用navigator.push()导航到另一个页面.后退按钮会弹出导航器并返回一页似乎很自然,但这不是正在发生的事情(退出应用程序).

反应本机Navigator真的没有后退按钮支持,我需要自己插入BackAndroid吗？

Answer 1

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

var navigator; 

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

在渲染代码中:

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

Answer 2

不确定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中,此模块已重命名为BackHandler.Navigator也已被正式弃用,但仍可在此处找到:https://github.com/facebookarchive/react-native-custom-components

import { BackHandler } from 'react-native';

Answer 3

是的,你必须自己处理后退按钮.我认为这样做的主要原因是您可能希望使用后退按钮执行不同的操作,而不是仅仅通过堆栈向后移动.我不知道是否有计划在未来采用后退按钮功能.

Answer 4

别忘了绑[this]

正确答案应该是:

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}}
  ...