React navigation的NavigationActio

NavigationActions

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

• routeName - String - 必须 - 在RouteConfigs中注册过的路由名称
• params - Object - 可选 - 传递的参数
• action - Object - 可选 - （高级）如果屏幕是导航器，则在子路由器中运行的子操作。本文档中描述的任何一项操作都可以设置为子操作。
• key - String - 可选 - 要导航到的路线的标识符。如果它已经存在，则返回到此路线。

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

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

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

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

3. SetParams

在调用SetParams时，路由器将产生一个新的状态，该状态已经改变了由key标识的特定路由参数

• params - Object - 可选 - 新的参数被合并到现有的路径参数中。
• key - String - 必须 - 获取新参数的路由键。

import { NavigationActions } from 'react-navigation';

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

4. Reset - 重置路由

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

• index - number - 必须 - 导航中routes活动路由的索引state。

• 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);

5. Replace - 用新的route替换当前的route

Replace操作将给定key上的路线替换为另一条路线。

• key - string - 必须 - 要替换​​路由的key。
• newKey - string - 用于替换路由的key。如果未提供，则自动生成。
• routeName - string - 用于替换路由的routeName。
• params - object - 要传入替换路由的参数。
• action - object - 可选的子操作。

6. Push- 入栈

Push操作会在堆栈顶部添加一条路径并向前导航。这与之前的不同之处在于，如果某个组件已经存在路由中，navigate则会弹出到堆栈中的较早版本。Push将始终添加在顶部，因此可以多次安装组件。

• routeName - string - 要跳转路由的routeName。
• params - object - 传递的参数，可以通过(this.props.navigation.state.params)找到。
• action - 子操作。

7. pop(n) - 出栈

Pop操作将使您回到堆栈中的前一个屏幕。n参数允许您指定要多少个屏幕出栈。

• n - number - 要出栈的屏幕数量。

8. PopToTop - 回到栈顶

PopToTop操作会将您带回堆栈中的第一个屏幕，解除所有其他屏幕。它的功能与StackActions.pop({n: currentIndex})类似。

参考
react-navigation使用技巧