React Navigation V2: Difference between navigation

问题:

I'm new to React Native and I'm currently studying the React Native Navigation Docs. I was wondering: What is the difference between navigation.push() and navigation.navigate()?

I tried finding it out by myself, but they seem to accomplish the exact same thing...

回答1:

If you check the documentation for push, there is an explanation of how different they are.

The Push action adds a route on top of the stack and navigates forward to it. This differs from navigate in that navigate will pop back to earlier in the stack if a component is already mounted there. Push will always add on top, so a component can be mounted multiple times.

We can take Instagram for example;

Consider navigating to a user's profile. Then you can check user's followers and then you can navigate to their profile's too. If you do this same actions with only navigate action, when you click on an user's profile from the followers list screen will navigate to the previous profile but if you use push it will push a new screen to the stack and show the correct profile. This way you can goBack to the first screen.

回答2:

According to the last blog post here: for v1:

navigate(routeName) and push(routeName) were very similar: every time you called navigate(routeName) it would push a new route to the stack.

for v2:

Now navigate(routeName) will first try to find an existing instance of the route and jump to that if it exists, otherwise it will push the route to the stack.

navigate > go to instance of page if exist or push a new instance

push > push a new instance even if one exist already