React Native 屏幕间移动

在本节中，我们将讨论如何从一个路由屏幕导航到另一个路由屏幕，然后返回到初始路由。在 导航的前一部分中，我们创建了带有两个路由屏幕（Home 和 Profile）的堆栈导航器。

从一个屏幕移动到另一个屏幕是通过使用 navigation prop 来实现的，navigation prop 会传递给我们的屏幕组件。它类似于为 Web 浏览器编写以下代码

另一种写法是

导航到新屏幕

从一个屏幕导航到另一个屏幕可以通过不同的方式执行

App.js

在“HomeScreen”中添加一个 Button 组件，并执行一个 onPress{} 操作，该操作调用 this.props.navigation.navigate('Profile') 函数。单击 Button 组件会将屏幕移动到“ProfileScreen”布局。

输出

• this.props.navigation: navigation prop 被传递到堆栈导航中的每个屏幕组件。
• navigate('Profile'): 使用我们想要移动到的路由名称调用 navigate 函数。

多次导航到路由屏幕

从“ProfileScreen”添加到“Profile”URL 的导航不会进行任何更改，因为我们已经在 Profile 路由中。

要调用 profile 屏幕，主要是在将唯一数据（参数）传递到每个路由的情况下。为此，我们将 navigate 更改为 push。 navigate push 表示添加另一个路由的意图，而不考虑现有的导航历史记录。

每次按下按钮时调用 push 方法，并将新路由添加到导航堆栈。

返回

当有可能从当前屏幕返回时，堆栈导航器的标题会自动包含一个后退按钮。单屏幕堆栈导航不提供后退按钮，因为没有任何可以返回的地方。

有时，我们以编程方式实现后退行为，为此，我们可以调用 this.props.navigation.goBack(); 函数。

App.js

输出