在react native中从堆栈导航器中移除屏幕

Question

我有一个以下流程的用例:控制面板→AddProductScreen1.0→AddProductScreen2.0→产品详细信息界面

这些屏幕位于堆栈导航器

Add Product屏幕是一个多页表单，用于填写产品的详细信息。在AddProductScreen2.0上，当点击AddProduct按钮时，将进行API调用来保存产品。如果调用成功，我们将移动到ProductDetailsScreen。现在，我想把AddProductScreens从堆栈导航器中移除这样，当点击后退按钮时，我们就会移动到仪表板而不是AddProductScreens

如何在react native中做到这一点?

Answer 1

我能想到的是，当你从Screen1移动到Screen2和细节屏幕时，你可以使用replace而不是push/navigate，如果你需要从Screen2导航到Screen1，你可以覆盖backbutton action也使用replace。第二个选项是在第二个屏幕上弹出/popToTop，然后导航到详细信息。

的例子:

useEffect(() => {
if (newCreatedTaskId) {
navigation.pop();
navigation.replace('UpdateTaskMembers', {
id: newCreatedTaskId,
newTask: true,
});
}
}, [newCreatedTaskId, navigation]);

Answer 2

UPDATE(样本未测试)

刚刚在react-navigation@5.7+中发现了一个新的方法，
优点此方法的优点在于您不需要自己覆盖HeaderBackButton,Android Back button和Back Swipe Gesture。

请随意尝试，并告诉我结果如果你的react-navigation版本足够高:

import React, { useEffect } from 'react';
const ProductDetailsScreen = ({ navigation }) => {
useEffect(() => {
const unsubscribe = navigation.addListener('beforeRemove', (e) => {
/* Prevent default behavior of leaving the screen */
e.preventDefault();
/* Pop to the first screen of stack navigator - DashboardScreen */
navigation.popToTop();
});
return unsubscribe;
}, [navigation]);
return (<>{/* Your screen content here */}</>);
};
export default ProductDetailsScreen;

方法参考文档:
https://reactnavigation.org/docs/preventing-going-back/

---

原始回答

由于您想让用户在点击标题返回按钮时回到ProductDetailsScreen中的DashboardScreen，请尝试通过覆盖标题返回按钮的功能来实现，如下所示:

import React, { useEffect } from 'react';
import { BackHandler } from 'react-native';
import { HeaderBackButton } from '@react-navigation/stack';
const ProductDetailsScreen = ({ navigation }) => {
useEffect(() => {
navigation.setOptions({
headerLeft: () => (<HeaderBackButton onPress={backToDashboard} />)
});
/* Remember to override Android system back button */
const backHandler = BackHandler.addEventListener("hardwareBackPress", backToDashboard);
return () => backHandler.remove();
}, [navigation]);
/* As your first screen in stack navigator is DashboardScreen so just popToTop() */
const backToDashboard = () => { navigation.popToTop(); };
return (<>{/* Your screen content here */}</>);
};
export default ProductDetailsScreen;

注意:记住重写Android返回按钮行为(如示例)。
如果你的屏幕上有手势处理程序，记住也要覆盖它

---

关于覆盖标题返回按钮的更多信息:
https://reactnavigation.org/docs/header-buttons/#overriding-the-back-button
https://reactnavigation.org/docs/stack-navigator/#headerleft