React Navigation - Navigation Ac

所有 Navigation Actions都会返回一个对象，可以使用navigation.dispatch()方法把对象发送到路由器。

请注意:如果你想用dispatch指定react-navigation的导航行为,你应使用react-navigation中提供的action creators。

支持以下操作：

• Navigate - 导航到其他路线
• Reset - 用新状态替换当前状态
• Back - 回到之前的状态
• set Params - 为给定路线设置参数
• init - 用于初始化状态在未定义时初始状态的时候

action creator函数定义了toString()来返回action类型，这使得第三方的Redux库很容易使用，包括redux-actions和redux-saga。

Navigate

Navigate action 会使用它自己运行的结果来更新当前的状态.

• routeName - String - 必需 - 已在应用路由器中路由名称
• params - Object - 可选 - 参数
• action - Object - 可选 - （高级）如果屏幕是导航器，则在子路由器中运行的子操作。 本文档中描述的任何一个操作都可以设置为子操作。

疑惑

import { NavigationActions } from 'react-navigation'

const navigateAction = NavigationActions.navigate({

  routeName: 'Profile',

  params: {},

  action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})

this.props.navigation.dispatch(navigateAction)

Reset(重置)

重置动作会删除整个导航状态，并将其替换为几个actions。

• index - number - 必需 - 路由数组索引。
• actions - array - 必需 - 导航行为数组将取代导航状态。
• key - string or null - 可选 - 如果设置，导航器key将重置。 如果为null，则根导航器将重置。

import { NavigationActions } from 'react-navigation'

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

怎么使用index 参数

index参数用于指定当前的路由。
eg：给定一个基本的导航和两个路由，路由的名字分别是Profile和Settings。 想把settings 路由激活为当前的路由，你可以：

import { NavigationActions } from 'react-navigation'

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

Back(返回)

返回到上一个屏幕并关闭当前屏幕。 返回动作创建者需要一个可选参数：

• key - string or null - optional - 如果设置，导航将从给定的键返回。 如果为空，导航将返回到任何地方。

import { NavigationActions } from 'react-navigation'

const backAction = NavigationActions.back({
  key: 'Profile'
})
this.props.navigation.dispatch(backAction)

SetParams

当使用dispatch调用SetParams时，路由器将产生一个新的状态，改变了特定路由的参数

• params - object - 必须 - 新的参数被合并到现有的路由参数中
• key - string - 必需 - 应该得到新的参数的路由键

import { NavigationActions } from 'react-navigation'

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