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>
  );
}