I am struggling with a situation. So I have three stack navigators.
navigator1 => screen1
navigator2 => screen2
navigator3 => screen3, screen4, screen5
I navigate from screen1
to screen2
. And then from screen2
to screen3
then screen4
then screen5
and then navigate to screen2
again. But now when I am on screen2
, onBack press I don't want to go on screen5
, instead want to go directly on screen1
.
When I tried to pop screen5
, screen4
and screen3
from stack just before navigating to screen2
from screen5
using the follwing code. It didn't work, still screen3
remains on stack.
import { StackActions } from '@react-navigation/native';
navigation.dispatch(
StackActions.popToTop()
);
OR
import { StackActions } from '@react-navigation/native';
navigation.dispatch(
StackActions.pop(3)
);
How to remove the navigator3
from the navigation stack? So that I would not go on screen5
from screen2
again onBackPress
I am using react-navigation version 5.x.
Check out this example it works as you want
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>
);
}
Why don't you navigate to directly Screen1
when user click back
button?
const onBack = () => {
navigation.navigate('Screen1');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.