React Navigation V2：navigation.push 和 navigation.navigate 的区别

Posted 2023-02-22

【中文标题】React Navigation V2：navigation.push 和 navigation.navigate 的区别

【英文标题】：React Navigation V2: Difference between navigation.push and navigation.navigate

【发布时间】：2018-12-07 23:08:16

【问题描述】：

我是 React Native 的新手，目前正在学习 React Native Navigation Docs。我想知道： navigation.push()和navigation.navigate()有什么区别？

我试着自己找出来，但他们似乎完成了完全相同的事情......

【参考方案1】：

如果您查看push 的文档，就会看到它们的不同之处。

Push 动作在栈顶添加路由并向前导航 给它。这与导航不同，导航将弹回 如果组件已经安装在堆栈中，则在堆栈的较早位置。推 将始终添加在顶部，因此可以多次安装组件。

我们可以以 Instagram 为例；

考虑导航到用户的个人资料。然后您可以检查用户的关注者，然后您也可以导航到他们的个人资料。 如果您仅使用navigate 操作执行相同操作，则当您从关注者列表屏幕中单击用户的个人资料时，将导航到上一个个人资料，但如果您使用push，它将向堆栈推送一个新屏幕并显示正确的个人资料。这样你就可以goBack到第一屏了。

【讨论】：

同样的问题：导航是否还会弹出所有实例？假设我有 3 个实例：A、B 和 C。A -> 导航 B -> 导航 C -> 导航 A 会导致只有 A 的堆栈还是堆栈仍然是 A B C？用 push 会是 A B C A 对吧？ :)

navigate 将弹回堆栈中的较早据我所知，它会弹出所有实例。我想你可以用一个简单的snack

来试试

【参考方案2】：

根据上一篇博文here： 对于 v1：

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

对于 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 > 转到页面实例（如果存在）或推送一个新实例

push > 推送一个新实例，即使已经存在一个实例

【讨论】：

导航是否还会弹出所有实例？假设我有 3 个实例：A、B 和 C。A -> 导航 B -> 导航 C -> 导航 A 会导致只有 A 的堆栈还是堆栈仍然是 A B C？用 push 会是 A B C A 对吧？

【参考方案3】：

我想我可以回答这个问题。

我们有三个页面：主页1 page2。

“home”是“initialRouteName”，“page1”和“page2”是子页面。

所以当我们从 home 开始，并 push page1（或导航 page1）时，页面堆栈是：

(2)。第1页

(1)。家

我push了3次page2，栈是：​​

(5)。第2页

(4)。第2页

(3)。第2页

(2)。第1页

(1)。家

现在我想回家，我可以

1 pop 四次，或者直接 pop(4)；

2 导航page1，然后弹出一次；

3 popToTop 一次；

当page stack没有page1时，navigate和push一样，push page到栈顶并显示页面。

当页面栈有page1时，navigation的作用是跳转到离栈顶最近的page1，弹出page1上面的其他页面。

例如下面的页面栈：

(7)。第2页

(6)。第2页

(5)。第2页

(4)。第1页

(3)。第1页

(2)。第1页

(1)。家

如果你想回家，你应该先导航第1页，然后弹出3次。

需要注意的是，当当前页面是page1并且你导航到page1时，什么都没有

发生了。

这是我写的一些测试代码，你直接复制到 App.js 里就行了。

import * as React from 'react';
import  Button, View,Text  from 'react-native';
import  NavigationContainer  from '@react-navigation/native';
import  createStackNavigator  from '@react-navigation/stack';
 
function HomeScreen( navigation ) 
  return (
    <View style=>
      <Button
        title="navigate to page1"
        onPress=() => navigation.navigate('page1',"pageName":"page1")
      />
      <Button
        title="push to page1"
        onPress=() => navigation.push('page1',"pageName":"page1")
      />
    </View>
  );

 
function Page(route, navigation ) 
 
  return (
    <View style=>
    <Text>`current page is $route.name`</Text>
       <Button
        title="navigate to Page1"
        onPress=() => navigation.navigate('page1')
      />
       <Button
        title="push Page1"
        onPress=() => navigation.push('page1')
      />
        <Button
        title="navigation to Page2"
        onPress=() => navigation.push('page2')
      />
       <Button
        title="push Page2"
        onPress=() => navigation.push('page2')
      />
      <Button
        title="Go to HomeScreen"
        onPress=() => navigation.navigate('Home')
      />
        <Button
        title="pop"
        onPress=() => navigation.pop()
      />
        <Button
        title="popToTop"
        onPress=() => navigation.popToTop()
      />
    </View>
  );

const Stack = createStackNavigator();
function MyStack() 
  return (
    <Stack.Navigator>
     <Stack.Screen name="Home" component=HomeScreen />
      <Stack.Screen name="page1" component=Page />
      <Stack.Screen name="page2" component=Page />
    </Stack.Navigator>
  );

 
export default function App() 
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );

希望对你有帮助。

【参考方案4】：

想让它简短而简单。

Navigation.navigate 检查屏幕是否在堆栈中，以便将其带到那里（到旧状态），但Navigation.push 只是将您带到新屏幕，而不检查之前是否访问过该屏幕以及该屏幕是否可用堆栈。