React Navigation，通过单击抽屉项目关闭抽屉导航内的堆栈导航

发布于 2025-01-15 16:14:54 字数 952 浏览 2 评论 0原文

我在反应导航 v6 方面遇到了小问题...

抽屉导航：

<Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />} >
    <Drawer.Screen name="Search" component={MainStackNavigator} />
    <Drawer.Screen name="Contact" component={ContactScreen} />
</Drawer.Navigator>

堆栈导航：

const MainStackNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="OffersList">
      <Stack.Screen name="OffersList" component={OffersList} />
      <Stack.Screen name="OfferDetails" component={OfferDetails} />
    </Stack.Navigator>
  );
};

现在，当我单击抽屉导航中的元素 Search 时，会显示 OffersList 页面。接下来，在 OffersList 上，当我单击任何优惠链接时，我会看到 OfferDetails 视图（堆栈导航） - 一切正常。然后，当我单击抽屉导航中的联系人，然后再次单击搜索时，我会看到上次打开的 OfferDetails 而不是 OfferList。当我通过抽屉导航时如何重置此堆栈导航？

原文

I have small issue with react navigation v6...

Drawer Navigation:

<Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />} >
    <Drawer.Screen name="Search" component={MainStackNavigator} />
    <Drawer.Screen name="Contact" component={ContactScreen} />
</Drawer.Navigator>

Stack navigation:

const MainStackNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="OffersList">
      <Stack.Screen name="OffersList" component={OffersList} />
      <Stack.Screen name="OfferDetails" component={OfferDetails} />
    </Stack.Navigator>
  );
};

and now, when I click on the element Search in drawer navigation then OffersList page is displayed. Next, on the OffersList, when I click on any offer link, then I see OfferDetails view (Stack Navigation) - every thing is ok. Then, when I click on the Contact in drawer nav, and again on Search then I see last opened OfferDetails instead of OfferList. How can I reset this stack navigation when i navigate by drawer?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

離人涙 2025-01-22 16:14:54

用户并不期望堆栈重置，但您认为这可以改善应用体验，只需在抽屉的 screenOptions 上传递 unmountOnBlur: true 即可。您的代码将如下所示：

function MyDrawer() {
  return (
    <Drawer.Navigator
      screenOptions={{
        unmountOnBlur: true
      }}
    >
      <Drawer.Screen name="SomeScreen" component={SomeScreen} />
      <Drawer.Screen name="SomeStack" component={SomeStack} />
    </Drawer.Navigator>
  );
}

您可以在世博会小吃上看到完整的示例代码。 https://snack.expo.dev/@marcelofreires/stackoverflow-questions-71548781< /a>

The user doesn't expect a stack reset, but you think it improves the app experience, just pass unmountOnBlur: true on screenOptions for the Drawer. Your code will be like this:

function MyDrawer() {
  return (
    <Drawer.Navigator
      screenOptions={{
        unmountOnBlur: true
      }}
    >
      <Drawer.Screen name="SomeScreen" component={SomeScreen} />
      <Drawer.Screen name="SomeStack" component={SomeStack} />
    </Drawer.Navigator>
  );
}

You can see the complete example code on an Expo snack. https://snack.expo.dev/@marcelofreires/stackoverflow-questions-71548781

回复收藏 0 原文

白鸥掠海 2025-01-22 16:14:54

我有相同的要求，并且在堆栈内的所有屏幕中使用 useIsFocused 挂钩除了初始屏幕之外，我使用 useEffect 来检查 isFocused 是否为 false，然后弹出屏幕。这是示例代码。

import { useIsFocused } from '@react-navigation/native'

function Sample({navigation}) {
  const isFocused = useIsFocused()
  
  // When the screen is blured, pop it out so when user goes back they will always see the initial screen
  useEffect(() => {
    if (!isFocused) {
      navigation.pop()
    }
  }, [navigation, isFocused])
}

I have the same requirement and I use the useIsFocused hook, in all screens inside the stack except the initial screen I use useEffect to check if isFocused is false then pop the screen out. Here is the example code.

import { useIsFocused } from '@react-navigation/native'

function Sample({navigation}) {
  const isFocused = useIsFocused()
  
  // When the screen is blured, pop it out so when user goes back they will always see the initial screen
  useEffect(() => {
    if (!isFocused) {
      navigation.pop()
    }
  }, [navigation, isFocused])
}

回复收藏 0 原文

~没有更多了~