Javascript React本机嵌套导航导致出现2个菜单

我目前在尝试使用React Native制作购物清单应用程序时遇到了一个问题。我使用React Navigation来处理屏幕，但我遇到了一个问题，如果我单击主屏幕上的浮动操作按钮，它将弹出“我是AddShoppingListForm”，但是当我打开下一个屏幕并再次单击按钮时，菜单将弹出，并且屏幕上应弹出的菜单将显示：“我是AddShoppingListItemForm”，它们相互重叠

如何确保在正确的屏幕上打开正确的菜单？我将“isVisible”当前存储在Redux中，以便根据我在组件上的嵌套方式更容易更改值，但我不确定这样做是否正确

我试图制作一个覆盖组件，作为传递到那里的菜单组件的包装器，但我不确定这是正确的方法。任何建议都将不胜感激

下面是我的代码片段

主屏幕：

export default function HomeScreen({ navigation }) {
  const isVisible = useSelector(selectOverlayVisiblity);
  const dispatch = useDispatch();

  const toggleOverlay = () => {
    dispatch(
      setOverlayVisible(!isVisible)
    )
  };

  return (
    <View style={styles.container}>
      {/* Shopping List */}
      <ShoppingList navigation={navigation} />

      <PopupMenu menu={<AddShoppingListForm />} isVisible={isVisible} />

      {/* Action Button */}
      <ActionButton buttonColor="rgba(231,76,60,1)" onPress={toggleOverlay} />
    </View>
  );
}

导出默认功能主屏幕（{navigation}）{
const isVisible=useSelector（SelectOverlayVisibly）；
const dispatch=usedpatch（）；
const toggleOverlay=（）=>{
派遣(
setOverlayVisible（！isVisible）
)
};
返回(
{/*购物清单*/}
通过从Redux中删除isVisible，而不是使用useState将isVisible存储在特定屏幕中，而不是整个应用程序中，我已经解决了这个问题

export default function ShoppingListDetailScreen({ navigation }) {
  const currentlistitems = useSelector(selectCurrentList);
  const isVisible = useSelector(selectOverlayVisiblity);
  const dispatch = useDispatch();

  const toggleOverlay = () => {
    dispatch(
      setOverlayVisible(!isVisible)
    )
  };

  return (
    <View style={styles.container}>


      {currentlistitems.map(function (item) {
        return <ListItemComponent key={item.id} title={item.title} avatar_url={item.avatar_url} />;
      })}

      <PopupMenu isVisible={isVisible} menu={<AddShoppingListItemForm />} />

      {/* Action Button */}
      <ActionButton buttonColor="rgba(231,76,60,1)" onPress={toggleOverlay} />

    </View>
  );
}

export default function PopupMenu({ navigation, isVisible, menu }) {
  const dispatch = useDispatch();

  const toggleOverlay = () => {
    dispatch(setOverlayVisible(!isVisible));
  };

  // console.log('MENU >>>', menu);

  return (
    <View style={styles.container}>
      {/* Overlay */}
      {Platform.OS === "web" ? (
        <WebModal isVisible={isVisible} menu={menu} />
      ) : (
        <MobileModal isVisible={isVisible} menu={menu} />
      )}
      {/* End of Overlay */}
    </View>
  );
}

function AddShoppingListForm() {

    const route = useRoute();

    console.log('AddShoppingListLitem >>', route.name);

    return (
        <View>
            {route.name === 'Home' &&
                <Text style={{color: "#fff"}}>I am the AddShoppingListForm</Text>
            }
        </View>
    )
}

function AddShoppingListItemForm() {

    const route = useRoute();

    console.log('AddShoppingListLitem >>', route.name);

    return (
        <View>
            {route.name === 'List' &&
                <Text>I am the ShoppingListItemForm</Text>
            }
        </View>
    )
}