React Native Navigation: Reset Stack Navigator

Question

我使用的是React Navigation 5。

在顶部，我有一个抽屉导航器，具有以下屏幕：

<Drawer.Navigator>
<Drawer.Screen name="One" component={StackNavigatorOne} />
<Drawer.Screen name="Two" component={StackNavigatorTwo} />
<Drawer.Screen name="Three" component={StackNavigatorThree} />
<Drawer.Navigator/>

在StackNavigatorOne中，我有一个堆栈导航器

<Stack.Navigator>
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="Screen2" component={Screen2} />
<Stack.Screen name="Screen2" component={Screen3} />
</Stack.Navigator>

从抽屉导航器中，如果用户导航到Stack Navigator One，然后移动到Screen2，则Screen2将保持在顶部。现在，如果用户打开抽屉导航并再次单击Stack Navigator One，他将出现在屏幕2上，因为屏幕2位于堆栈的顶部。

然而，我需要的是，当用户单击DrawerScreen One时，它应该始终转到StackNavigatorOne的Screen1。当用户单击抽屉中的DrawerScreen One时，是否可以重置StackNavigatorOne中的屏幕，而不管用户在哪个屏幕上？

谢谢。

Answer 1

最简单的解决方案是使用unmountOnBlur: true。

抽屉导航器的屏幕选项上有一个道具unmountOnBlur: true。当用户从一个抽屉屏幕移动到另一个抽屉时，您可以使用它来卸载屏幕堆栈。

你可以这样使用它：

<Drawer.Navigator
screenOptions={{
unmountOnBlur: true
}}
>
<Drawer.Screen name="One" component={StackNavigatorOne} />
<Drawer.Screen name="Two" component={StackNavigatorTwo} />
<Drawer.Screen name="Three" component={StackNavigatorThree} />
<Drawer.Navigator/>

您可以在此处找到有关unmountOnBlue的更多详细信息。

Answer 2

解决方案1：

你可以在抽屉里的screenOptions道具中使用unmountOnBlur:true，比如这个DOCS

<Drawer.Navigator
screenOptions={{
unmountOnBlur: true
}}
>
<Drawer.Screen name="One" component={StackNavigatorOne} />
<Drawer.Screen name="Two" component={StackNavigatorTwo} />
<Drawer.Screen name="Three" component={StackNavigatorThree} />
<Drawer.Navigator/>

解决方案2：

props.navigation.canGoBack()告诉我们用户是否可以goBack或不能

popToTop将弹出除第一个屏幕之外的所有屏幕

如果导航堆栈不是空的，那么我们必须像这个一样使用popToTop来重置StackNavigatorOne上的堆栈

import {  StackActions } from '@react-navigation/native';
function StackNavigatorOne = (props) => {
useEffect(() => {
props.navigation.addListener('focus', () => {
if(props.navigation.canGoBack())
{
props.navigation.dispatch(StackActions.popToTop());
}
});
}, [])
return (
<Stack.Navigator key={key}>
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="Screen2" component={Screen2} />
<Stack.Screen name="Screen2" component={Screen3} />
</Stack.Navigator>
)
}

Answer 3

您可以在每次StackNavigatorOne未聚焦时重置它，例如：

function StackNavigatorOne = (props) => {
const [key, setKey] = useState(0)
const isFocused = useIsFocused()
useEffect(() => {
if (!isFocused) setKey((k) => k + 1)
}, [isFocused])
return (
<Stack.Navigator key={key}>
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="Screen2" component={Screen2} />
<Stack.Screen name="Screen2" component={Screen3} />
</Stack.Navigator>
)
}