React Navigation（三）-StackActions(API)

原文链接

StackActions对象包含了生成特定actions的方法，即基于栈导航器的actions。这些方法扩展了NavigationActions。

支持以下actions：

• Reset - 用一个新的状态替换当前状态
• Replace - 用其他路由替换指定了key的路由
• Push - 栈顶新加一个路由，并跳转过去
• Pop - 回退到前一个路由
• PopToTop -  跳转到栈顶路由并关闭其他所有路由

Reset

reset action清除整个导航状态，并且用若干个actions来代替

• index - number - 必需- 当前路由在props.navigation.state路由数组中的索引.
• actions - array - 必需 - 上面提到的，要替换导航状态的actions数组.
• key - string or null - 可选- 如果设置，key所指定的导航器将会重置，如果是null，根导航器会重置.

import { StackActions, NavigationActions } from 'react-navigation';

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

怎样使用index参数

index参数用来指定当前活动的路由。

例如：给定的基本栈导航器中有两个路由Profile和Settings。要将状态重置成：当前激活screen是Setting，同时在栈中将其置于Profile之上，可以这样做：

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 1,
  actions: [
    NavigationActions.navigate({ routeName: 'Profile' }),
    NavigationActions.navigate({ routeName: 'Settings' }),
  ],
});
this.props.navigation.dispatch(resetAction);

Replace

replace action将key指定的路由换成其他路由

• key - string - 必需- 要被替换的路由的key.
• newKey - string - 用来替换的路由的key.没有指定会自动生成
• routeName - string - 用来替换的路由的名称.
• params - object - 要传入的参数.
• action - object - 可选择的子action.
• immediate* - boolean - *目前没有影响.

Push

push action在栈顶新增一个路由并跳转过去。与navigate的不同之处在于 如果目标组件已经被加载到栈中过，navigate会跳转到早先的这个中。push则总是在添加在栈顶，因此一个组件可能会被多次加载。

• routeName - string - 要被push到栈中的路由名称.
• params - object - 要被merge到目标路由中的参数 (通过this.props.navigation.state.params获取).
• action - (高级选项) 如果该screen是一个导航器，表示子路由器中的action.

import { StackActions } from 'react-navigation';

const pushAction = StackActions.push({
  routeName: 'Profile',
  params: {
    myUserId: 9,
  },
});

this.props.navigation.dispatch(pushAction);

Pop

pop action将你带到栈中的前一个screen。参数n指定要pop多少个screen。

n - number - 要pop的数量.

import { StackActions } from 'react-navigation';

const popAction = StackActions.pop({
  n: 1,
});

this.props.navigation.dispatch(popAction);

PopToTop

PopToTop action回退到栈中的第一个screen，并关闭其他screen。功能与StackAction.Pop({n:currentIndex})相同。

import { StackActions } from 'react-navigation';

this.props.navigation.dispatch(StackActions.popToTop());