【问题标题】：Disable back button in a specific Screen (React Navigation Stack)在特定屏幕中禁用后退按钮（反应导航堆栈）
【发布时间】：2020-07-13 18:29:58
【问题描述】：

你好！

我需要禁用导航栏上的后退按钮。请帮帮我。

路线

首页：我不想离开应用程序
成功：我不想返回 Checkout。

Example: click here

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { OrderProvider } from '../contexts/order';

import Home from '../pages/Home';
import Checkout from '../pages/Checkout';
import Success from '../pages/Checkout/success';

const AppStack = createStackNavigator();

const AppRoutes = () => (
  <OrderProvider>
    <AppStack.Navigator screenOptions={{ headerShown: false }}> 
      <AppStack.Screen name="Home" component={Home} />  <-- here
      <AppStack.Screen name="Checkout" component={Checkout} />
      <AppStack.Screen name="Success" component={Success} /> <--- here
    </AppStack.Navigator>
  </OrderProvider>
);

export default AppRoutes;

import React from 'react';
import { View} from 'react-native';

const Success = () => {
  return (
    <View />
  );
};

export default Success;

【问题讨论】：

标签： react-native react-navigation react-navigation-v5

【解决方案1】：

您可以执行以下操作：

const Home = () => {
  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        return true;
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);

      return () =>
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, []),
  );
  // ...
};

const Success = ({navigation}) => {
  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        navigation.navigate('Home');
        return true;
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);

      return () =>
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, []),
  );
  // ...
};

我已将其设置为在调用hardwareBackPress 事件时返回true 不会执行任何操作。

对于Success 屏幕，我导航回Home。

我认为这是您在阅读您的问题时正在寻找的行为。

重要的是不要忘记导入useFocusEffect from react-navigation 随处可见：

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

什么时候在hardwareBackPress事件处理函数中返回true或false在react导航文档中有解释：

从 onBackPress 返回 true 表示我们已经处理了事件，并且 react-navigation 的侦听器不会被调用，因此不会弹出屏幕。返回 false 将导致事件冒泡并且 react-navigation 的监听器会弹出屏幕。

如果您想了解更多信息，请阅读此处的文档：https://reactnavigation.org/docs/custom-android-back-button-handling/。

【讨论】：