Кнопка «Обратно» в «Реагировать родной», «Навигатор» на Android

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

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

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

Solutions Collecting From Web of "Кнопка «Обратно» в «Реагировать родной», «Навигатор» на Android"

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

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

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

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

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

Не знаю, когда изменился API, но в ответ на native 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; }); } 

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

 import { BackHandler } from 'react-native'; 

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

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

 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 }