Question

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

我试图自己找到它，但是他们似乎确实完成了同样的事情...

Answer 1

如果您查看push的文档，则说明它们有何不同。

Push操作将一条路由添加到堆栈顶部并向前导航对此。这与导航不同，导航将弹出回到如果组件已安装在堆栈中，则在堆栈中的早期。推将始终添加在顶部，因此可以多次安装组件。

我们可以以Instagram为例；

考虑导航到用户的个人资料。然后，您可以检查用户的关注者，然后也可以导航到其个人资料。如果您仅通过navigate操作执行相同的操作，则在“关注者”列表屏幕上单击用户的个人资料时，将导航至上一个个人资料，但如果您使用push，则会将新屏幕推送到堆叠并显示正确的配置文件。这样，您可以goBack到第一个屏幕。

Answer 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.

导航>转到页面实例（如果存在）或推送新实例

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

Answer 3

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

我们有3个页面：首页1页面2。

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

因此，当我们从首页开始并推入page1（或导航page1）时，页面堆栈为：

（2）。第1页

（1）。家

然后我按了两次page2，堆栈是：

（5）。第2页

（4）。第2页

（3）。第2页

（2）。第1页

（1）。家

现在我要回家了，我可以

1次弹出四次，或直接弹出（4）；

2浏览page1，然后弹出一次；

3 popToTop一次；

当页面堆栈没有page1时，导航与推入的工作原理相同，将页面推到堆栈顶部并显示页面。

当页面堆栈具有page1时，导航功能是跳转到最接近堆栈顶部的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>
  );
}

希望对您有所帮助。

Answer 4

想让它简短而简单。

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

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

4 个答案: