[如果用户单击android back按钮，如何不返回上一个屏幕

Question

非常感谢。在标准状态下，堆栈浏览器在从一个浏览器导航到A到页面B时，如果观看或投票返回Android，则在A的情况下会返回到上一页。代码在运行，发生了什么，但是我想知道如何禁用此返回（就像在切换导航器中一样），因为它在导航v5中不再可用。src \ routes.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {setNavigator} from './services/navigation';
import User from './pages/User';
import Local from './pages/Local';
import Position from './pages/Position';
import Result from './pages/Result';
import Locations from './pages/Locations';

const Stack = createStackNavigator();

export default function Routes() {
  return (
    <NavigationContainer ref={setNavigator}>
      <Stack.Navigator
        initialRouteName="User"
        screenOptions={{}}
        mode="card"
        headerMode="none">
        <Stack.Screen name="User" component={User} />
        <Stack.Screen name="Local" component={Local} />
        <Stack.Screen name="Position" component={Position} />
        <Stack.Screen name="Result" component={Result} />
        <Stack.Screen name="Locations" component={Locations} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

src \ services \ navigation.js

import {CommonActions} from '@react-navigation/native';

let navigator;

export function setNavigator(ref) {
  navigator = ref;
}

export function navigate(name) {
  navigator.dispatch(
    CommonActions.navigate({
      name,
    })
  );
}

环境

System:
    OS: Windows 10 10.0.18363
    CPU: (6) x64 Intel(R) Core(TM) i5-9400 CPU @ 2.90GHz
    Memory: 1.83 GB / 7.82 GB
  Binaries:
    Node: 10.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  SDKs:
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.3
Google Play Intel x86 Atom_64
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.6010548
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

package.json

{
  "name": "bettahidroturbinas",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.6.2",
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/native": "^5.0.3",
    "@react-navigation/stack": "^5.0.3",
    "axios": "^0.19.0",
    "eslint-config-airbnb": "^18.0.1",
    "immer": "^4.0.0",
    "prop-types": "^15.7.2",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-community-geolocation": "^0.0.6",
    "react-native-geolocation-service": "^4.0.0",
    "react-native-gesture-handler": "^1.5.6",
    "react-native-masked-text": "^1.13.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.0.0-beta.2",
    "react-native-vector-icons": "^6.6.0",
    "react-redux": "^7.1.1",
    "reactotron-react-native": "^3.6.5",
    "reactotron-redux": "^3.1.1",
    "reactotron-redux-saga": "^4.2.2",
    "redux": "^4.0.4",
    "redux-saga": "^1.0.5",
    "styled-components": "^4.3.2",
    "url": "^0.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/runtime": "^7.7.6",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "eslint": "^6.7.2",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^2.0.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "prettier": "^1.18.2",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

提前感谢您的回答。

Answer 1

代替navigate，您可以使用replace替换屏幕，从而将前一个屏幕删除。类似于navigate在开关导航器中的工作方式。

https://reactnavigation.org/docs/en/stack-actions.html#replace

Answer 2

@ satya164提出的决议src \ routes.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {setNavigator} from './services/navigation';
import User from './pages/User';
import Local from './pages/Local';
import Position from './pages/Position';
import Result from './pages/Result';
import Locations from './pages/Locations';

const Stack = createStackNavigator();

export default function Routes() {
  return (
    <NavigationContainer ref={setNavigator}>
      <Stack.Navigator
        initialRouteName="User"
        screenOptions={{}}
        mode="card"
        headerMode="none">
        <Stack.Screen name="User" component={User} />
        <Stack.Screen name="Local" component={Local} />
        <Stack.Screen name="Position" component={Position} />
        <Stack.Screen name="Result" component={Result} />
        <Stack.Screen name="Locations" component={Locations} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

src \ services \ navigation.js

import {CommonActions, StackActions} from '@react-navigation/native';

let navigator;

export function setNavigator(ref) {
  navigator = ref;
}

export function navigate(name) {
  navigator.dispatch(
    CommonActions.navigate({
      name,
    })
  );
}
export function replace(name) {
  navigator.dispatch(StackActions.replace(name));
}