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

Question

我对react导航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视图(堆栈导航(-一切正常。然后，当我在抽屉导航中单击联系人，再次单击Search时，我看到的是上次打开的OfferDetails，而不是OfferList。当我按抽屉导航时，如何重置此堆栈导航？

Answer 1

用户不希望堆栈重置，但您认为它可以改善应用程序体验，只需在抽屉的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>
);
}

您可以在Expo小吃上看到完整的示例代码。https://snack.expo.dev/@marcelofreires/stackoverflow问题71548781

Answer 2

我有同样的要求，我使用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])
}