我是 React Native 的新手，目前正在研究React Native Navigation Docs。我想知道：navigation.push()和之间有什么区别navigation.navigate()？
我试着自己找出来，但他们似乎完成了完全相同的事情......
React Navigation V2：navigation.push 和 navigation.navigate 的区别
IT技术
reactjs
react-native
react-navigation
2021-04-22 13:47:12
4个回答
如果您查看 的文档push，则会解释它们的不同之处。
Push 操作在堆栈顶部添加一个路由并向前导航。这与导航不同，如果组件已安装在堆栈中，导航将弹回堆栈中的较早位置。推将始终添加在顶部，因此可以多次安装组件。
我们可以以 Instagram 为例；
考虑导航到用户的个人资料。然后您可以检查用户的关注者，然后您也可以导航到他们的个人资料。如果您仅使用navigate操作执行相同的操作，则当您从关注者列表屏幕单击用户的个人资料时，将导航到之前的个人资料，但如果您使用push它，则会将新屏幕推送到堆栈并显示正确的个人资料。这样你就可以goBack进入第一个屏幕。
根据此处的最后一篇博文：对于 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 > 推送一个新实例，即使一个已经存在
我想我可以回答这个问题。
我们有三个页面：主页1 页2。
“home”是“initialRouteName”，“page1”和“page2”是子页面。
所以当我们从 home 开始，push page1（或导航 page1）时，页面堆栈是：
(2). 第1页
(1). 家
我推了三次page2，堆栈是：
(5). 第2页
(4). 第2页
(3). 第2页
(2). 第1页
(1). 家
现在我想回家，我可以
1 pop 四次，或者直接pop(4)；
2 导航page1，然后弹出一次；
3 popToTop 一次；
当页面堆栈没有 page1 时，导航与推送相同，将页面推到堆栈顶部并显示页面。
当页面栈有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>
);
}我希望它会对你有所帮助。
想让它简短而简单。
Navigation.navigate检查屏幕是否在堆栈中，因此它会在那里（到旧状态）但Navigation.push只是带你到新屏幕而不检查屏幕之前是否被访问过以及它是否在堆栈中可用。