问题
First let me state that I know how to navigate from one nested page to another using react navigation. However, whenever i navigate to a nested screen that is not the initial route, that screen now become the first screen whenever i navigate back to that nested stack.
Example.
- Parent Navigator
- Nested Stack Navigator 1
- screen A (Initial Route)
- screen B
- Nested Stack Navigator 2
- screen C (Initial Route)
- screen D
- Nested Stack Navigator 2
- screen E (Initial Route)
- screen F
- Nested Stack Navigator 1
Normally when navigating from one stack to Nested Stack Navigator 2
the I use the following.
navigation.navigate('Nested Navigator 2');
Which takes me to screen C
, this is the expected behaviour. However, whenever i'm navigating from another stack to screen D
, I notice that whenever i navigate back to Nested Stack Navigator 2
with the above code it no longer opens up screen C
it opens up screen D
instead.
This is how I navigate to screen D
from another stack.
navigation.navigate('Nested Navigator 2', { screen: 'screen D', initial: false });
Whenever this is used screen D
acts as the initial route, event though I specified initial: false
in the navigation call. Is there a way to prevent this?
回答1:
once you navigate to a another component other than intial route component, of a Nested Stack Navigation, navigation.navigate('Nested Navigator 2');
will not work
Initial your navigation stack will look this on intial routes
[
{name: ScreenA ,},
{name: ScreenC,},
{name: ScreenE}
]
but whenever you navigate from sreen C to Screen D, Screen D will route will not inserted at the end of the stack , since it is Nested Navigation two
[
{name: ScreenA ,},
{name: NestedNAvigator, [{name:screenC }, {name:screenD}]},
{name: ScreenE}
]
so you will need to use, navigation.navigate('Nested Navigator 2', { screen: 'screen D' }); that is because stack changes when you navigate to a screen other than intial route,
you will need to reset routes on on Nested Component , i.e. whenever you navigate to screen D, reset route stack using commonActions, set screen, this will update the stack , and remove screen D from the stack.
import { CommonActions } from '@react-navigation/native';
componentDidMount() {
this.props.navigation.addListener('blur', () => {
this.props.navigation.dispatch(
CommonActions.reset({
index: 1,
routes: [
{ name: 'ScreenC' },
],
})
);
});
}
if you want to remove a certain route only instead of resetting whole navigation
this.props.navigation.dispatch(state => {
// Remove the route from the stack
const routes = state.routes.filter((r => r.name !== 'ScreenC' ));
return CommonActions.reset({
...state,
routes,
index: routes.length - 1,
});
});
来源:https://stackoverflow.com/questions/65819611/how-do-i-keep-initial-route-with-nested-navigation-with-react-navigation-v5