Кнопка «Назад» на Android не обнаружена приложением, управляемым с помощью React Native Expo ⇐ Android

[Anonymous]

Проблема:
При нажатии кнопки «Назад» в Android мое приложение немедленно закрывается как на эмуляторе, так и на физическом устройстве. Я хочу обнаружить нажатие кнопки «Назад».
РЕДАКТИРОВАТЬ: я обнаружил, что BackHandler работает в Expo Go, но не в режиме разработки.< /p>
После упрощения моего проекта кнопка «Назад» по-прежнему не обнаруживается проектом, поскольку предупреждение не отображается (как добавлено в App.js).
Прежде чем я рассмотрю возможность рефакторинга и перехода на маршрутизатор Expo (который, я не уверен, решит эту проблему), я решил посмотреть, сталкивался ли кто-нибудь с этой проблемой в прошлом.

Чего я ожидаю:
Я пытаюсь добавить функциональность для управления происходящим когда пользователь нажимает кнопку возврата Android. Например, я бы хотел, чтобы появлялось предупреждение, подтверждающее, хочет ли пользователь покинуть приложение или нет (как показано в App.js). Даже простой журнал консоли, позволяющий определить, что пользователь нажал кнопку «Назад», был бы великолепен, но этого не произойдет.
Я просмотрел документацию React Navigation. Однако решения этой проблемы я не нашел.
Android Bundled 115ms (C:\git\index.js) LOG Workout screen is focused, adding back button listener
// App.js
import React, { useEffect } from 'react';
import { BackHandler, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StatusBar } from 'react-native';
import Workout from './screens/Workout';
import { Provider as ReduxProvider } from 'react-redux';
import store from './store/store';

const Stack = createStackNavigator();

const App = () => {
useEffect(() => {
const backAction = () => {
Alert.alert("Hold on!", "Are you sure you want to go back?", [
{
text: "Cancel",
onPress: () => null,
style: "cancel"
},
{ text: "YES", onPress: () => BackHandler.exitApp() }
]);
return true;
};

const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);

return () => backHandler.remove();
}, []);

return (








);
};

export default App;

// Workout.js
import React, { useEffect } from 'react';
import { View, Text, BackHandler } from 'react-native';
import { useIsFocused } from '@react-navigation/native';

const Workout = () => {
const isFocused = useIsFocused();

useEffect(() => {
const backAction = () => {
console.log("Back button pressed in Workout screen");
BackHandler.exitApp(); // Directly exit the app for testing
return true; // Prevent default behavior
};

if (isFocused) {
console.log('Workout screen is focused, adding back button listener');
const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
return () => {
console.log('Workout screen is losing focus, removing back button listener');
backHandler.remove();
};
}
}, [isFocused]); // Dependency array includes isFocused to re-attach listener when focus changes

return (

Workout Screen

);
};

export default Workout;

// package.json
{
"name": "xxxxx",
"version": "0.2",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"devtools": "react-devtools",
"test": "jest --detectOpenHandles",
"lint": "eslint ."
},
"dependencies": {
"@babel/plugin-transform-object-rest-spread": "^7.24.5",
"@expo/config-plugins": "^7.8.0",
"@expo/prebuild-config": "^6.7.0",
"@react-native-async-storage/async-storage": "1.21.0",
"@react-navigation/native": "^6.1.9",
"@react-navigation/stack": "^6.3.17",
"@redux-devtools/extension": "^3.3.0",
"@redux-devtools/instrument": "^2.2.0",
"@redux-devtools/serialize": "^0.4.2",
"@reduxjs/toolkit": "^1.9.5",
"@sentry/cli": "^2.31.1",
"@sentry/react-native": "~5.20.0",
"date-fns": "^2.30.0",
"expo": "~50.0.17",
"expo-build-properties": "~0.11.1",
"expo-constants": "~15.4.6",
"expo-dev-client": "~3.3.12",
"expo-font": "~11.10.3",
"expo-modules-core": "~1.11.13",
"expo-splash-screen": "~0.26.5",
"expo-status-bar": "~1.11.1",
"firebase": "^10.12.2",
"i18next": "^23.6.0",
"i18next-react-native-async-storage": "^1.0.4",
"normalizr": "^3.6.2",
"react": "18.2.0",
"react-devtools": "^4.28.0",
"react-dom": "18.2.0",
"react-i18next": "^13.3.1",
"react-native": "0.73.6",
"react-native-calendars": "^1.1300.0",
"react-native-crisp-chat-sdk": "^0.14.1",
"react-native-elements": "^3.4.3",
"react-native-gesture-handler": "~2.14.0",
"react-native-get-random-values": "~1.8.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-modal": "^13.0.1",
"react-native-pager-view": "6.2.3",
"react-native-paper": "^5.11.1",
"react-native-popup-menu": "^0.16.1",
"react-native-reanimated": "~3.6.2",
"react-native-reanimated-carousel": "^3.5.1",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"react-native-svg": "14.1.0",
"react-native-tab-view": "^3.5.2",
"react-native-webview": "13.6.4",
"react-redux": "^8.1.2",
"redux": "^4.2.1",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.2",
"reselect": "^4.1.8",
"uuid": "^9.0.1",
"victory-native": "^36.6.12"
},
"devDependencies": {
"@babel/core": "^7.23.9",
"@babel/preset-env": "^7.23.7",
"@babel/preset-react": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
"@testing-library/jest-native": "^5.4.3",
"@testing-library/react-native": "^12.4.3",
"babel-jest": "^29.7.0",
"eslint": "^8.56.0",
"eslint-config-standard": "^17.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-n": "^16.6.2",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-native": "^4.1.0",
"jest": "^29.7.0",
"jest-expo": "~50.0.4",
"react-test-renderer": "18.2.0",
"remote-redux-devtools": "^0.5.16"
},
"private": true
}```


Подробнее здесь: https://stackoverflow.com/questions/786 ... anaged-app