Как Back Pressed работает в React Native:
Чтобы Back Pressed работал в react native, нам нужно соблюдать некоторые соглашения. Поскольку RN - это гибридное приложение, мы не можем напрямую реализовать эту возможность Android. Итак, нам просто нужно выполнить некоторые шаги и соглашения, которые позволят нам получить возможности Android.
Шаг 1. Сначала нам нужно импортировать модуль BackHandler из библиотеки react-native. Этот модуль позволит RN взаимодействовать с основным оборудованием Android.
import {BackHandler} from “react-native”;
Шаг 2: Затем нам нужно определить метод / функцию обратного обработчика, в которой мы будем писать действие события Back Pressed.
handleBackButton(){
}
Шаг 3: Теперь нам нужно добавить и привязать эту функцию к нашему модулю BackHandler в методе componentDidMount во время загрузки компонента, для этого нам нужно использовать addEventListener модуля BackHandler и добавьте метод handleBackButton в BackHandler и свяжите его с областью действия этого класса.
BackHandler.addEventListener(‘hardwareBackPress’,this.handleBackButton.bind(this));
Шаг 4: Теперь мы готовы заставить работать свой handleBackButton. Итак, чтобы выйти, нажмите кнопку «Назад» на вашем устройстве Android. Нам нужно написать
BackHandler.exitApp();
Полный код
import React, {Component} from 'react';
import {Actions, Router, Scene} from "react-native-router-flux";
import Login from "./src/login";
import {BackHandler} from "react-native";
export default class App extends Component<Props> {
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton.bind(this));
}
handleBackButton(){
BackHandler.exitApp();
}
render() {
return (
<Router>
<Scene key='root'>
<Scene
key="login"
hideNavBar
component={Login}
/>
</Scene>
</Router>
);
}
}
Шаг 5. Теперь мы можем сделать его немного умнее. Если этот код работает для вас, вы можете попробовать следующее. Итак, теперь мы сделаем наш onbackPressExit на 1 шаг впереди. Поскольку мы используем react-native-router-flux, это означает, что мы используем Router и Scene. Итак, у нас есть несколько сцен. Поэтому, если пользователь вернется на любой экран, приложение выйдет. Так что, если мы хотим выйти в определенной Сцене. Поэтому для этого мы должны условно выполнить команду BackHandler.exitApp (). Вот код, в конце кода я объясню, что происходит.
Полностью измененный код
import React, {Component} from 'react';
import {Actions, Router, Scene} from "react-native-router-flux";
import Login from "./src/login";
import Login2 from "./src/dashboard";
import MoreScreen from './src/MoreScreen';
import {BackHandler, ToastAndroid} from "react-native";
import Campaigns from "./src/campaign";
import Agents from './src/agents';
let backPressed = 0;
export default class App extends Component<Props> {
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton.bind(this));
}
constructor(){
super();
this.state={
isloggedin: false,
backPressed: 1
}
}
handleBackButton(){
if(Actions.currentScene === 'campaigns' || Actions.currentScene === 'agents' || Actions.currentScene === 'dashboard'){
if(backPressed > 0){
BackHandler.exitApp();
backPressed = 0;
}else {
backPressed++;
ToastAndroid.show("Press Again To Exit", ToastAndroid.SHORT);
setTimeout( () => { backPressed = 0}, 2000);
return true;
}
}
}
render() {
return (
<Router>
<Scene key='root'>
<Scene
key="login"
hideNavBar
component={Login}
/>
<Scene
key='dashboard'
hideNavBar
component={Login2}
title={'Dashboard'}
/>
<Scene
key='MoreScreen'
hideNavBar
component={MoreScreen}
title={'MoreScreen'}
/>
<Scene
key='campaigns'
hideNavBar
component={Campaigns}
title={'campaigns'}
/>
<Scene
key='agents'
hideNavBar
component={Agents}
title={'agents'}
/>
</Scene>
</Router>
);
}
}
Здесь, в рендере, у нас есть функция возврата под функцией возврата, у нас есть компонент Route, а в разделе Route у нас есть корневая сцена, под сценой маршрута у нас есть 5 сцен. Эти пять сцен
<Scene
key="login"
hideNavBar
component={Login}
/>
<Scene
key='dashboard'
hideNavBar
component={Login2}
title={'Dashboard'}
/>
<Scene
key='MoreScreen'
hideNavBar
component={MoreScreen}
title={'MoreScreen'}
/>
<Scene
key='campaigns'
hideNavBar
component={Campaigns}
title={'campaigns'}
/>
<Scene
key='agents'
hideNavBar
component={Agents}
title={'agents'}
/>
Теперь, если мы хотим, чтобы это происходило только в том случае, если пользователь находится в Личном кабинете, Агентах или Кампании, тогда кнопка Back Press выйдет из приложения. Поэтому для повышения производительности нам необходимо обновить метод handleBackButton следующим образом.
handleBackButton(){
if(Actions.currentScene === 'campaigns' || Actions.currentScene === 'agents' || Actions.currentScene === 'dashboard'){
if(backPressed > 0){
BackHandler.exitApp();
backPressed = 0;
}else {
backPressed++;
ToastAndroid.show("Press Again To Exit", ToastAndroid.SHORT);
setTimeout( () => { backPressed = 0}, 2000);
return true;
}
}
}
Здесь мы также сделали еще одно - снова нажали тост. Таким образом, если пользователь находится в желаемой Сцене и нажимает кнопку «Назад», то появляется всплывающее сообщение, в котором пользователю будет предложено еще раз нажать кнопку «Назад» для выхода. Чтобы добиться этого, мы использовали модуль ToastAndroid из react-native. Мы также объявляем переменную с именем backPressed вверху как глобальную переменную со знаком 0.
let backPressed = 0;
Эта переменная используется для отслеживания того, сколько раз пользователь нажимал кнопку возврата. поэтому в методе handleBackButton мы проверили, находится ли пользователь в правильной сцене по условию
if(Actions.currentScene === 'campaigns' || Actions.currentScene === 'agents' || Actions.currentScene === 'dashboard')
а затем мы проверили, сколько раз нажималась кнопка.
if(backPressed > 0)
Если это больше, чем 1 раз, то будет выполнена истинная часть тела IF, и приложение завершится.
{
BackHandler.exitApp();
backPressed = 0;
}
но если это первый раз, когда кнопка «Назад» нажата, то значение переменной backPressed будет увеличено, и будет показан тост.
backPressed++;
ToastAndroid.show("Press Again To Exit", ToastAndroid.SHORT);
Затем я также переместил функциональность немного дальше. Итак, чтобы устранить ошибку (если вы нажмете кнопку один раз и перейдете к другой Сцене, а затем снова нажмете кнопку «Назад», она выйдет. Не отображается всплывающее сообщение о том, что «нажмите еще раз, чтобы выйти»).
чтобы решить эту проблему, мы использовали функцию setTimeout, где ждали 2 секунды. в течение этих 2 секунд, если вторая нажатая кнопка назад не нажата, тогда переменная backPressed будет сброшена на 0, чтобы пользователь перешел на другую сцену и снова нажал обратно, затем он снова показывает тост и возвращает истину, чтобы он не выполнял значение по умолчанию обратное мероприятие для прессы.
setTimeout( () => { backPressed = 0}, 2000);
return true;
Таким образом, приложение будет закрыто только в том случае, если пользователь находится на панели инструментов, в агентах или в сцене кампании. В противном случае кнопка возврата назад будет работать по умолчанию.
