NavigationActions的属性介绍和使用

最新推荐文章于 2025-06-09 22:16:59 发布

原创最新推荐文章于 2025-06-09 22:16:59 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

React Navigation 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了NavigationActions在导航中的使用，包括Navigate、Back、SetParams和Reset四个方法。Navigate用于跳转到其他路由，接受routeName、params等参数。Back用于返回上一路由，SetParams可以更新路由参数，而Reset则用于重置整个导航状态。在dispatch这些Action时，即使未处理也不会抛出错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所有的NavigationActions 都会返回一个对象，我们可以使用navigation.dispatch()这个方法将这个对象发送给router。

有一点需要着重强调一下，当我们dispatch一个NavigationAction的时候，即使这个action没有被处理，它也不会抛出任何错误提示。（这与redux中相似，在redux中你dispatch一个action，如果这个action没有被处理，他也不会有任何报错或者提示。）因为，如果你dispatch的结果是app的state被改变了，那么返回的值应该是true,如果没有改变state，返回的值则为false.

其有以下几个方法供我们调用

Navigate 用来跳转到其他路由的方法

routeName ---String 必需这个参数就是RouteConfigs中注册过的路由名称。

params -----Object 可选传递的参数

action ----Object 可选（高级）如果所要跳转的屏幕组件也是一个导航器，那么这个对象就是在子路由器中运行的子操作。

key ----String 可选要导航到的路线的标识符。如果它已经存在，则返回到此路线。

示例如下：

import { NavigationActions } from 'react-navigation';
const navigateAction = NavigationActions.navigate({
  routeName: 'Home',
  params: {},
  action: NavigationActions.navigate({ routeName: 'matterList' }),
});
this.props.navigation.dispatch(navigateAction);

Back 用来返回到上一个路由或其他路由

Key ---String | null 如果设置该参数，导航将从给定的键返回。如果为空，导航将返回到上一级。

import { NavigationActions } from 'react-navigation';
const backAction = NavigationActions.back({
  key: 'Profile',
});
this.props.navigation.dispatch(backAction);

SetParams

在调用SetParams时，路由器会生成一个新的state。而其中的参数就会被合并到这个新的state中。

params --- Object 参数

key ----String -- 必需获取新参数的路由键。

import { NavigationActions } from 'react-navigation';

const setParamsAction = NavigationActions.setParams({
  params: { title: 'Hello' },
  key: 'screen-123',
});
this.props.navigation.dispatch(setParamsAction);

Reset 重置路由

Reset操作将重置整个导航状态并将其替换为新的导航。

index --- number 必需导航中routes活动路由的索引

actions ---array 必需将替换导航数组

key ----String | null 可选，如果设置，具有给定键的导航器将重置。如果为null，则根导航器将被重置。

import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);