React Native 在两个屏幕之间来回导航

Question

我有 Home 屏幕，我们在其中搜索 ItemCode，在我们搜索 ItemCode 后，它将从 API 获取详细信息，屏幕将导航到 Screen 1（项目详细信息屏幕） & 从屏幕 1 中，我们搜索 ItemNutrients，搜索后将获得 Nutrients & Navigate to Screen 2（营养屏幕）

换句话说

主页 -> 屏幕 1（项目详细信息屏幕）-> 屏幕 2（营养屏幕）

在通过 API 搜索项目详细信息和营养素获得必要的详细信息后，用户可以在项目详细信息和营养素之间来回导航..

我可以从 Screen 1（项目详情）导航到 Screen2（营养屏幕）并滑回 Screen 1（项目详情）但是如果我已经拥有 API for Nutrients 的数据，我怎么能向前滑动以再次查看 Screen 2（营养屏幕）而不在 Screen 1 中搜索营养。 p>

关于如何实现这一点的任何想法？这基本上是从屏幕 1 搜索时导航到 屏幕 1 到 屏幕 2，或者如果 屏幕 2 搜索已经完成并且我们有数据，请滑动forward 应该导航到 Screen 2，我可以有一个按钮导航到 Screen 2，Screen 1 上的按钮仅在我们有 Nutrients Screen 的 API 数据时才会出现将在该按钮单击时导航到 Screen 2，但我还需要滑动功能才能向前导航

我在 stackNavigator 中有 Home、Screen 1、Screen 2，可以吗，或者我可以使用任何其他导航器来实现这一点。

我已经研究过如何做到这一点，但在任何地方的文档中都找不到。如果我在某处遗漏它，请告诉我。谢谢！

营养背景：

import React, { createContext, useState, useEffect } from "react";

export const NutriSyncContext = createContext();

const DEFAULT_IS_NUTRI_SCANNED = false;

export const NutriSyncContextProvider = ({ children }) => {
  const [isNutritionScanned, setisNutritionScanned] = useState(
    DEFAULT_IS_NUTRI_SCANNED
  );

  // When we first mount the app we want to get the "latest" conversion data
  useEffect(() => {
    setisNutritionScanned(DEFAULT_IS_NUTRI_SCANNED);
  }, []);

  const nutrionScanClick = ({ navigation }) => {
    setisNutritionScanned(true);
    //navigation.navigate("NutritionFacts");
  };

  const contextValue = {
    isNutritionScanned,
    setisNutritionScanned,
    nutrionScanClick,
  };

  return (
    <NutriSyncContext.Provider value={contextValue}>
      {children}
    </NutriSyncContext.Provider>
  );
};

navigation.js 内

const tabPNMS = createMaterialTopTabNavigator();

function tabPNMSStackScreen() {
  const { isNutritionScanned } = useContext(NutriSyncContext);
  console.log(isNutritionScanned);

  return (
    <tabPNMS.Navigator initialRouteName="PNMSNutrition" tabBar={() => null}>
      <tabPNMS.Screen name="PNMSNutrition" component={PNMSNutrition} />
      {isNutritionScanned ? (
        <tabPNMS.Screen name="NutritionFacts" component={NutritionFacts} />
      ) : null}
    </tabPNMS.Navigator>
  );
}

和堆栈导航：

const SearchStack = createStackNavigator();
const SearchStackScreen = () => (
  <NutriSyncContextProvider>
    <SearchStack.Navigator
      initialRouteName="Search"
      screenOptions={{
        gestureEnabled: false,
        headerStyle: {
          backgroundColor: "#101010",
        },
        headerTitleStyle: {
          fontWeight: "bold",
        },
        headerTintColor: "#ffd700",
        headerBackTitleVisible: false, //this will hide header back title
      }}
      headerMode="float"
    >
      <SearchStack.Screen
        name="Search"
        component={Search}
        options={({ navigation }) => ({
          title: "Search",
          headerTitleAlign: "center",
          headerLeft: () => (
            <Entypo
              name="menu"
              size={24}
              color="green"
              onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
            />
          ),
        })}
      />
      <SearchStack.Screen
        name="NutriTabs"
        options={() => ({
          title: "PNMS",
          headerTitleAlign: "center",
        })}
        component={tabPNMSStackScreen}
      />
    </SearchStack.Navigator>
  </NutriSyncContextProvider>
);

我在堆栈周围有 NutriSyncContextProvider，但是当我单击页面上的按钮时，它会在上下文类中调用 nutrionScanClick 方法，它工作得很好，但是当我导航到启用的 NutritionFacts 选项卡时，我收到错误提示 NutritionFacts标签不存在

我得到它的工作是下面的代码：

 const nutrionScanClick = () => {
    if (!isNutritionScanned) setisNutritionScanned(true);
    else {
      //Make a API call here for new data for the new scanned one's and then navigate
      navigation.navigate("NutritionFacts");
    }
  };

  useEffect(() => {
    if (isNutritionScanned) {
      navigation.navigate("NutritionFacts");
    }
  }, [isNutritionScanned]);

Answer 1

堆栈导航器中的屏幕之间没有来回滑动。您需要使用标签导航器才能保持这样的多个屏幕。

https://reactnavigation.org/docs/material-top-tab-navigator

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator tabBar={() => null}>
      <Tab.Screen name="ItemDetails" component={ItemDetails} />
      {showNutrients ? <Tab.Screen name="Nutrients" component={Nutrients} /> : null}
    </Tab.Navigator>
  );
}