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

Question

我正在为一种情况而苦苦挣扎。 所以我有三个堆栈导航器。

• 导航器 1 => 屏幕 1

• 导航器 2 => 屏幕 2

• 导航器 3 => 屏幕 3、屏幕 4、屏幕 5

我从screen1导航到screen2 。 然后从screen2到screen3 3，然后是screen4 4，然后是screen5 ，然后再次导航到screen2 。 但是现在当我在screen2上时，onBack 按我不想在 screen5 上screen5 ，而是想直接在 screen1 上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 的screen2上screen5 onBackPress

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

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

Answer 2

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

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