关闭嵌套的堆栈导航器

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

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

<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 2

1-) 使用导航。

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

docs这么说。

In a stack navigator, calling navigate with a screen name will result in different behavior based on if the screen is already present or not. If the screen is already present in the stack's history, it'll go back to that screen and remove any screens after that. If the screen is not present, it'll push a new screen.

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关于pop

方法1、2可以试试零食here.

Answer 3

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

 navigation.dangerouslyGetParent().pop();

Answer 4

您可以为“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');

关闭嵌套的堆栈导航器

Dismiss the nested stack navigator

react-native

react-navigation

react-navigation-stack

react-navigation-v5

1-) 使用导航。

2-) 使用重置。

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

4-) 使用一叠 pop.