关闭嵌套堆栈导航器

Question

在我的反应本机项目中，我正在使用库

"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",

我有嵌套的导航器，如下所示：

// root level I have a stack navigator where it contains two screens, `Home` and `Settings`.
const App = ()=> {
  const rootStack = createStackNavigator();
  return (
    <NavigationContainer>
      <rootStack.Navigator>
        <rootStack.Screen name="Home" component={Home} />
        <rootStack.Screen name="Settings" component={Settings} />
      </rootStack.Navigator>
    </NavigationContainer>
  );
}

// The Settings screen is a nested stack navigator
const Settings = ()=> {
  const settingsStack = createStackNavigator();
  return (
    <settingsStack.Navigator>
      <settingsStack.Screen name="SettingsOne" component={SettingsOneScreen} />
      <settingsStack.Screen name="SettingsTwo" component={SettingsTwoScreen} />
    </settingsStack.Navigator>
  );
}

正如您所看到的，“设置”屏幕实际上是另一个级别（嵌套）堆栈导航器。

在 上SettingsOneScreen，有一个按钮可将用户导航至SettingsTwoScreen。

const SettingsOneScreen = ({navigation}) => {
   ...
   return (
      ...
      <Button onPress={()=>navigation.navigate("SettingsTwo")}/>
   )
}

现在，在 上SettingsTwoScreen，我有一个按钮，我想在用户点击该按钮时关闭整个设置导航器堆栈。这就是关闭整个设置堆栈并向用户显示Home. 如何实现？

const SettingsTwoScreen = ({navigation}) => {
   ...
   return (
      ...
      <Button onPress={/*dismiss the settings stack*/}/>
   )
}

（当然，我不能使用navigation.goBack()仅将用户导航回上一个屏幕，即SettingOneScreen在这种情况下。）

Answer 1

1-) 使用导航。

//this will go back to Home and remove any screens after that. 
navigation.navigate('Home')

文档是这么说的。

在堆栈导航器中，使用屏幕名称调用导航将根据屏幕是否已存在而导致不同的行为。如果该屏幕已存在于堆栈历史记录中，则it'll go back to that screen and remove any screens after that. 如果屏幕不存在，它将推送一个新屏幕。

2-) 使用重置。

navigation.reset({
  index: 0,
  routes: [{ name: 'Home' }],
})}

请参阅有关重置的文档

3-) 使用替换然后返回。

//from SettingsOne call replace instead navigate
//this will remove SettingsOne and push SettingsTwo
navigation.replace('SettingsTwo');


//then from SettingsTwo 
//calling goBack will back to home because SettingsOne removed in last step 
navigation.goBack();

4-) 使用一个带有 pop 的堆栈。

import { StackActions } from '@react-navigation/native';

//merge two stacks in one
<NavigationContainer>
   <rootStack.Navigator>
     <rootStack.Screen name="Home" component={Home} />
     <rootStack.Screen name="SettingsOne" component={SettingsOneScreen} />
     <rootStack.Screen name="SettingsTwo" component={SettingsTwoScreen} />
   </rootStack.Navigator>
</NavigationContainer>

//back 2 screen
navigation.dispatch(StackActions.pop(2));

请参阅有关流行音乐的文档

对于方法1、2，您可以尝试这里的零食。