从反应原生的堆栈导航器中删除屏幕答案

【问题标题】：Remove screens from stack navigator in react native从反应原生的堆栈导航器中删除屏幕
【发布时间】：2021-02-16 16:15:46
【问题描述】：

我有一个具有以下流程的用例： Dashboard->AddProductScreen1.0->AddProductScreen2.0->产品详情界面

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

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

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

【问题讨论】：

嗨@IN_DEV，请随时查看所有答案并标记您问题的最佳答案，谢谢。

标签： reactjs react-native react-navigation react-native-navigation stack-navigator

【解决方案1】：

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

例子：

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

【讨论】：

【解决方案2】：

更新（样品未测试）

刚刚在react-navigation@5.7+发现了一个新方法，
这个方法的好处应该是不需要覆盖HeaderBackButton、Android Back button、@987654327 @自己。

如果您的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 后退按钮行为（如示例中所示）。
如果您的屏幕中有手势处理程序，请记住也要覆盖它

【讨论】：