在本機反應中從堆棧導航器中刪除屏幕

Question

我有一個具有以下流程的用例：Dashboard->AddProductScreen1.0->AddProductScreen2.0-> product details screen

這些屏幕位於堆棧導航器內

添加產品屏幕是一個多頁表單，用於填寫產品的詳細信息。 在 AddProductScreen2.0 上單擊 AddProduct 按鈕時，將調用 API 以保存產品。 如果調用成功，我們將轉到 ProductDetailsScreen。 此時我想從堆棧導航器中刪除 AddProductScreens，以便在單擊后退按鈕時我們再次移動到 Dashboard 而不是 AddProductScreens

如何在 React Native 中做到這一點？

Answer 1

我能想到的是，當您從屏幕 1 移動到屏幕 2 和詳細信息屏幕時，您可以使用替換而不是推送/導航，如果您需要從屏幕 2 導航到屏幕 1，您可以覆蓋后退按鈕操作也可以使用替換。 第二個選項是在第二個屏幕上彈出/ 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/

---

原始答案

由於您想要的是讓用戶 go 在單擊 header 后退按鈕時返回ProductDetailsScreen creen 中的DashboardScreen ，請嘗試通過覆蓋 header 后退按鈕的 function 來實現它，如下所示：

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 后退按鈕行為（如示例中所示）。
如果您的屏幕中有手勢處理程序，請記住也要覆蓋它

---

有關覆蓋 header 后退按鈕的更多信息：
https://reactnavigation.org/docs/header-buttons/#overriding-the-back-button
https://reactnavigation.org/docs/stack-navigator/#headerleft