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

Question

我是React Native的新手,我正在研究React Native Navigation Docs.我在想:navigation.push()和之间有什么区别navigation.navigate()？

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

Answer 1

如果您查看文档push,可以解释它们的不同之处.

Push操作在堆栈顶部添加一个路径并向前导航到它.这与导航不同,如果组件已经安装在那里,导航将弹回到堆栈中的早期.推送将始终添加到顶部,因此可以多次安装组件.

我们可以以Instagram为例;

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

Answer 2

根据此处的最新博客文章：对于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.

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

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

Answer 3

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

我们有三个页面：主页1、页面2。

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

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

（2）。第1页

(1). 家

我推了三次page2，堆栈是：

（5）。第2页

（4）。第2页

（3）。第2页

（2）。第1页

(1). 家

现在我想回家，我可以

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

2 导航page1，然后pop一次；

3 popToTop 一次；

当页面堆栈没有page1时，navigate的工作方式与push相同，将页面推送到堆栈顶部并显示该页面。

当页面栈有page1时，navigate的作用是跳转到最接近栈顶的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>
  );
}

希望对您有所帮助。