关闭嵌套堆栈导航器

Question

在我的 react-native 项目中，我正在使用库

"@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')

docs 这么说。

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

2-) 使用重置。

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

请参阅docs 了解重置

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));

见docs关于流行音乐

方法1、2可以试试snack here。

Answer 2

我以前也遇到过同样的问题，这对你有更多帮助

<Button onPress={()=>navigation.navigate("Settings",{
    screen: 'SettingsTwo',
    params: { data: data }//put here the data that you want to send to SettingTow
 )}
 />
 

//more explanation
goto = (data) => {
navigation.navigate('parent_stack', {
    screen: 'screen_on_children_stack',
    params: { data: data }
});

}

Answer 3

您可以为“root”应用创建一个 Switch navigator，并创建两个堆栈“home”和“setting”。

const Root = ()=> (createAppContainer(createSwitchNavigator(
    {
     
      Home: Home,
      Settings: Settings,
    },
    {
      initialRouteName: 'Home',
    }
  )

// 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>
  );
}

然后您可以轻松地在主页和设置堆栈之间切换

this.props.navigation.navigate('Settings');

Answer 4

https://reactnavigation.org/docs/upgrading-from-4.x/#dismiss

 navigation.dangerouslyGetParent().pop();