React Navigation 初探 - 页面跳转

React Navigation 初探 - 页面跳转

在网页中页面跳转:

<a href="details.html">Go to Details</a>

或者另一张写法

<a
  onClick={() => {
    window.location.href = 'details.html';
  }}
>
Go to Details
</a>

在 navigation 中我们会做一些类似后者操作,通过 navigation 一些属性实现页面跳转.

跳转到新的页面

在 Snack 中尝试

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

// ... other code from the previous section

• navigation - navigation 作为参数传到 native stack navigator 中的每一个页面.

• navigate('Details') - 我们通过调用 navigation 的 navigate 方法实现页面跳转.

多次跳转的同一页面

在 Snack 中尝试

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

运行以上代码,点击 Go to Details... again,你会发现没有任何反应.这是因为我们当前已在Details页面,navigate是跳转到 name 对应的页面,如果你已在该页面,则不会有任何反应.

可以通过 navigation.push('Details')实现多次跳转同一页面.

<Button
  title="Go to Details... again"
  onPress={() => navigation.push('Details')}
/>

我们每次调用push时都会向导航堆栈添加一条新的路由信息.当调用navigate时,他会首先查找是否已存在该名称对应的路由,仅在没有新路由时才会跳转新路由.

路由返回之前页面

可以通过页面左上角包含的返回按钮返回前一页面,单很多时候是不包含返回按钮,需要我们自己实现返回功能.

可以通过 navigation.goBack(); 实现返回功能.

在 Snack 中尝试

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

当我们需要返回根路由器是,可以通过navigation.popToTop()实现,他返回堆栈中的第一个页面.

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

总结

• navigation.navigate('RouteName') 如果它不在堆栈中，则将新路由推送到本机堆栈导航器，否则它跳转到该屏幕。
• 我们可以随心所欲地调用 navigation.push(‘RouteName’)多次，它将继续推送路由。
• 标题栏将自动显示一个后退按钮，但您可以通过调用以编程方式返回 navigation.goBack()。在 Android 上，硬件后退按钮按预期工作。
• 您可以使用 返回堆栈中的现有屏幕 navigation.navigate(‘RouteName’)，也可以使用返回堆栈中的第一个屏幕 navigation.popToTop()。
• navigation 可用于所有屏幕组件（在路由配置中定义为屏幕并由 React Navigation 渲染为路由的组件）。