堆叠式 React Navigator 会导致组件实例化时 API 被调用 2 次

Question

我是 React Native 的新手，我有一个使用堆栈和选项卡导航器的应用程序。堆栈导航器是选项卡导航器的子导航器。问题在于，当屏幕同时使用它们时，会导致组件中的

useEffect

被调用两次。我该如何解决这个问题？

这是包含导航器的

App.js

：

const App = () => {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
};

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Discover"
        component={DiscoverScreen}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="MyGarden"
        component={MyGardenScreen}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Planty"
        component={PlantyScreen}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Specific"
        component={SpecificPlantScreen}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};

const TabNavigator = () => {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={() => ({
        tabBarStyle: {
          height: 80,
          backgroundColor: "#232516",
          paddingBottom: 5,
        },
        headerShown: false,
        tabBarActiveTintColor: "white",
        tabBarInactiveTintColor: "gray",
      })}
    >
      <Tab.Screen
        name="Home"
        component={StackNavigator}
        options={{
          tabBarIcon: ({ focused }) => (
            <FontAwesome
              style={focused ? styles.focusedNavButtonBackground : {}}
              name="home"
              size={35}
              color={focused ? "black" : "white"}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Discover"
        component={DiscoverScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <FontAwesome
              style={focused ? styles.focusedNavButtonBackground : {}}
              name="search"
              size={35}
              color={focused ? "black" : "white"}
            />
          ),
        }}
      />
      <Tab.Screen
        name="MyGarden"
        component={MyGardenScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <FontAwesome6
              style={focused ? styles.focusedNavButtonBackground : {}}
              name="sun-plant-wilt"
              size={35}
              color={focused ? "black" : "white"}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

这是两个导航器中的

DiscoverScreen

：

const DiscoverScreen = ({ navigation }) => {
  const [getPlants, incrementPageNumber, page, plants, errorMessage] =
    usePlants();

  useEffect(() => {
    console.log("API called");
    getPlants(page);
  }, [page]);

  // ... rest of the component
};

此外，

usePlants

逻辑：

useEffect(() => {
  console.log("API called");
  getPlants(page);
}, [page]);

任何帮助将不胜感激！

我也尝试仅更新其中一个导航器，但这导致选项卡组件或堆栈无法更新。

Answer 1

您有 2 件

Discover

商品

      <Stack.Screen
        name="Discover"
        component={DiscoverScreen}
        options={{ headerShown: false }}
      />

...

      <Tab.Screen
        name="Discover"
        component={DiscoverScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <FontAwesome
              style={focused ? styles.focusedNavButtonBackground : {}}
              name="search"
              size={35}
              color={focused ? "black" : "white"}
            />
          ),
        }}
      />

只需重命名其中一个就可以了

例如

      <Stack.Screen
        name="Discover"
        component={DiscoverScreen}
        options={{ headerShown: false }}
      />

...

      <Tab.Screen
        name="DiscoverTab"
        component={DiscoverScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <FontAwesome
              style={focused ? styles.focusedNavButtonBackground : {}}
              name="search"
              size={35}
              color={focused ? "black" : "white"}
            />
          ),
        }}
      />