React Native：如何从导航堆栈中删除当前堆栈导航器答案

【问题标题】：React Native: How to remove the current stack navigator from the navigation-stackReact Native：如何从导航堆栈中删除当前堆栈导航器
【发布时间】：2020-12-07 23:34:48
【问题描述】：

我正在与一种情况作斗争。所以我有三个堆栈导航器。

navigator1 => 屏幕1
navigator2 => 屏幕2
navigator3 => screen3, screen4, screen5

我从screen1 导航到screen2。然后从screen2 到screen3 然后screen4 然后screen5 然后再次导航到screen2。但是现在当我在screen2 时，onBack 按我不想继续screen5，而是想直接继续screen1。

当我尝试使用以下代码从screen5 导航到screen2 之前从堆栈中弹出screen5、screen4 和screen3。它不起作用，screen3 仍然在堆栈中。

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

  navigation.dispatch(
       StackActions.popToTop()
  );

或

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

  navigation.dispatch(
       StackActions.pop(3)
  );

如何从导航堆栈中删除navigator3？这样我就不会再从screen2继续screen5 onBackPress

我正在使用 react-navigation 版本 5.x。

【问题讨论】：

如果你这样做navigate('screen2')会发生什么？
它导航到screen2。
那么，它是否倒回堆栈？（目前在我的手机上，所以无法测试自己。试一试）
这就是问题所在。它从screen2 的后背压回到screen5。我希望它在后按时在screen1 上导航。
覆盖后退按钮的预期行为可能是个坏主意——你只会让你的用户感到困惑。为什么不在应用 UI 中为此实现一个专用按钮（“返回主菜单”等）？

标签： react-native react-redux react-native-android react-navigation react-navigation-v5

【解决方案1】：

看看这个例子，它可以按照你的意愿工作

import * as React from 'react';
import { View, Button, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const A = ({ navigation }) => {
  return (
    <View>
      <Text>A</Text>
      <Button title={'Next'} onPress={() => navigation.navigate('Second')} />
    </View>
  );
};
const B = ({ navigation }) => {
  return (
    <View>
      <Text>B</Text>
      <Button
        title={'Next'}
        onPress={() => navigation.navigate('Third', { screen: 'C' })}
      />
    </View>
  );
};
const C = ({ navigation }) => {
  return (
    <View>
      <Text>C</Text>
      <Button
        title={'Next'}
        onPress={() => navigation.navigate('Third', { screen: 'D' })}
      />
    </View>
  );
};
const D = ({ navigation }) => {
  return (
    <View>
      <Text>D</Text>
      <Button
        title={'Next'}
        onPress={() => navigation.navigate('Third', { screen: 'E' })}
      />
    </View>
  );
};
const E = ({ navigation }) => {
  return (
    <View>
      <Text>E</Text>
      <Button title={'Next'} onPress={() => navigation.navigate('Second')} />
    </View>
  );
};

const FirstStackScreen = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="A" component={A} />
    </Stack.Navigator>
  );
};

const SecondStackScreen = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="B" component={B} />
    </Stack.Navigator>
  );
};
const ThirdStackScreen = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="C" component={C} />
      <Stack.Screen name="D" component={D} />
      <Stack.Screen name="E" component={E} />
    </Stack.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="First" component={FirstStackScreen} />
        <Stack.Screen name="Second" component={SecondStackScreen} />
        <Stack.Screen name="Third" component={ThirdStackScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

【讨论】：

所以在这个例子中，一旦你在Screen-E，然后再次导航到Screen-B。当您在Screen-B 上时，然后按回。在后面按它不应该再去在Screen-E 但Screen-A。因此，如果您可以删除整个导航器ThirdStackScreen ，这将得到解决。
它在您的问题中按您的意愿工作。当您在屏幕-E 中时，您导航到屏幕-B。然后在背面按返回屏幕-A，而不是屏幕-E

【解决方案2】：

当用户单击back 按钮时，为什么不直接导航到Screen1？

const onBack = () => {
   navigation.navigate('Screen1');
}

【讨论】：

实际上有时我需要从 Screen2 转到其他屏幕（在堆栈中），具体取决于我之前从哪个屏幕导航到 Screen2。