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

对于方法 1、2，您可以尝试小吃 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 导航器，并创建两个堆栈“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();

关闭嵌套的堆栈导航器

4 个答案:

1-) 使用导航。

2-) 使用重置。

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

4-) 使用一个栈和 pop。