Question

我有一个具有以下流程的用例：仪表板->AddProductScreen1.0->AddProductScreen2.0-> 产品详细信息屏幕

这些屏幕位于堆栈导航器中

添加产品屏幕是一个多页表单，用于填写产品的详细信息。在 AddProductScreen2.0 上单击 AddProduct 按钮时，将调用 API 来保存产品。如果调用成功，我们将移至 ProductDetailsScreen。在这一点上，我想从堆栈导航器中删除 AddProductScreens，以便在单击后退按钮时我们再次移动到仪表板而不是 AddProductScreens

如何在 React Native 中做到这一点？

Answer 1

我能想到的是，当您从 Screen1 移动到 Screen2 和详细信息屏幕时，您可以使用 replace 而不是 push/navigate，如果您需要从 screen2 导航到 screen1，您也可以覆盖后退按钮操作使用替换。第二个选项是在第二个屏幕上pop / popToTop，然后导航到详细信息。

示例：

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

Answer 2

更新（样本未测试）

刚刚在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/

原答案

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

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

在 React Native 中从堆栈导航器中删除屏幕

2 个答案:

更新（样本未测试）

原答案