在特定屏幕中禁用后退按钮(React 导航堆栈)

Question

你好！

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

路线

• 首页：我不想离开应用程序
• 成功：我不想回到结账。

示例：单击此处

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;

Answer 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事件时，单击Home屏幕上的返回true不会执行任何操作。

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

我认为这是您通过阅读问题寻找的行为。

---

重要的是不要忘记useFocusEffect从 反应导航 无论你在哪里使用它：

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

---

何时返回true或false在hardwareBackPress事件处理程序函数中解释，请参见 react 导航文档：

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

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