所有 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)
网友评论