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

Question

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

换句话说

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

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

我可以从屏幕 1 （项目详细信息）导航到屏幕2（营养屏幕）并滑回屏幕 1 （项目详细信息），但是我如何才能向前滑动以再次查看屏幕 2 （营养屏幕）而不在屏幕 1中搜索营养我已经有来自 API 的营养素数据。

关于如何实现这一点的任何想法？ 这基本上是从屏幕 1 搜索时导航到屏幕 1到屏幕 2 ，或者如果屏幕 2搜索已经完成并且我们有数据，所以向前滑动应该导航到屏幕 2 ，我可以有一个按钮导航到屏幕 2 ，按钮打开屏幕 1 仅在我们有营养屏幕的 API 数据时才会出现，并且它会在该按钮单击时导航到屏幕 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，但是当我单击页面上的按钮时，它会在上下文 class 中调用 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>
  );
}