Кнопка "Обратно" в React Native, Navigator на Android

У меня есть Navigator в собственном приложении для Android.

Я использую navigator.push() для перехода на другую страницу. Кажется естественным, что кнопка "назад" появится в навигаторе и вернется на одну страницу, но это не то, что происходит (она выходит из приложения).

У реагирующей нативной Navigator действительно нет поддержки кнопки "назад", мне нужно подключить ее самостоятельно с помощью BackAndroid?

Ответы

Ответ 1

Да, вы должны сами обращаться с обратной кнопкой. Я думаю, что основной причиной этого является то, что вы можете делать разные вещи с помощью кнопки "Назад", а не просто перемещаться по стеку. Я не знаю, есть ли планы включить функциональные возможности кнопок в будущем, хотя.

Ответ 2

В дополнение к ответу выше, код обработки должен быть чем-то вроде этого

var navigator; 

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

в коде рендеринга:

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

Ответ 3

Не знаю, когда изменился API, но как реагировать на родной 0.31 (возможно, более ранние версии) BackAndroid - это компонент, который должен быть импортирован из native-native:

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

Также не забудьте удалить слушателя на компонентеWillUnmount:

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

* UPDATE: в ответном нативном 0.44 этот модуль был переименован в BackHandler. Navigator также официально устарел, но все еще можно найти здесь: https://github.com/facebookarchive/react-native-custom-components

import { BackHandler } from 'react-native';

Ответ 4

Не забывайте bind [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}}
  ...

Ответ 5

Чтобы очистить код, используя мои знания и предыдущие ответы, вот как это должно выглядеть:

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
}