Navigation事件 · React Navigation中文网

所有导航操作都会返回一个可以使用navigation.dispatch()方法发送给路由的对象。

如果你想分发react-navigation的事件，你必须使用该库提供的·action creators

支持以下事件：

Navigate - 导航到其他路由
Reset - 使用新的state替换当前的state
Back - 返回到上一个state
Set Params - 设置给定的路由的参数
Init - 如果状态未定义，则用于初始化第一个状态

动作创建函数定义了toString()方法来返回事件类型，这使得第三方的Redux库很容易使用，包括redux-actions和redux-saga。

Navigate

Navigate将使用Navigate事件执行的结果来更新当前的状态

routeName - 字符串 - 必须 - 已在应用程序的路由器中注册的目标路由名称
params - Object - 可选 - 合并到目标路由中的参数
action - Object - 可选 - (高级）如果页面是navigator，则是在子路由中运行的子操作。有关action的完整列表，请参阅Actions Doc）。

import { NavigationActions } from 'react-navigation'

const navigateAction = NavigationActions.navigate({

  routeName: 'Profile',

  params: {},

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

this.props.navigation.dispatch(navigateAction)

Reset

Reset方法清除了所有的navigation属性，使用多个方法的结果替换了

index - 数字型 - 必选项 - navigation.state.routers数组中当前router的索引
actions - 数组 - 必选项 - 将要替换navigation.state的Action数组
key - 字符串或 null - 可选项 - navigator将会使用设置的key重置；如果是null，根navigator将会重置

import { NavigationActions } from 'react-navigation'

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

如何使用`index`参数

index参数用于指定当前的路由。

例如: 给定一个有两个路由（Profile 和 Settings）的基础班stack navigation,如果要将状态重置为：当前页面是Settings，但是它要在Profile上层，则需要执行以下操作：

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

返回到上一个页面，并且关闭当前页面。back方法带了一个可选的参数：

key - 字符串或 null - 可选项 - 如果设置了，navigation将从key对应的页面返回；如果是null，则从当前页面返回

import { NavigationActions } from 'react-navigation'

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

SetParams

当调用 SetParams方法时，路由将会返回一个改变了特定路由参数的状态

params - 对象 - 必选项 - 被合并到当前路由参数中的新的参数
key - 字符串 - 必选项 - 应该获得新参数的路由标识

import { NavigationActions } from 'react-navigation'

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

Navigate

Reset

如何使用index参数

Back

SetParams

如何使用`index`参数