ReactNavigation 之 navigation 方法

作者: 未来与传说 | 来源:发表于2017-03-21 17:19 被阅读2609次
  1. ** 跳转到指定导航页 **
    navigation.navigate(routeName, params, action);
  • routeName 导航所定义的名称
  • params 可传入的参数
  • action (未知作用)
  1. 返回上一页或指定导航页
    navigation.goBack(name)
  • 如果 name为空,即不传参,则为返回到上一次导航
  • 如果 name为null ,则不作任何响应
  • 如果 name为指定导航名称,则跳转到指定导航页
  1. 调度导航路由参数
    navigation.dispatch(Object)
  • Object 传入对象参数
  • 使用NavigationActions.reset方法;作用:重置当前导航路由,使用场景比如进入APP的Loading页后不在使用,这时可以重置它
//定义重写对象参数,需要使用NavigationActions方法
import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'NotepwdList'})
  ]
})
//在组件中使用dispatch调度路由
this.props.navigation.dispatch(resetAction)
  • 使用NavigationActions.navigate 变更导航
import { NavigationActions } from 'react-navigation'

const navigationAction = NavigationActions.navigate({
  routeName: 'Profile',
  params: {},

  // 允许嵌套配置子导航路由
  action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
// 在组合中使用dispatch调度路由
this.props.navigation.dispatch(navigationAction)

*使用NavigationActions.setParams重新设置当前路由参数

import { NavigationActions } from 'react-navigation'

const setParamsAction = NavigationActions.setParams({
  params: {}, 
  key: 'screen-123',
})
// 在组合中使用dispatch调度路由
this.props.navigation.dispatch(setParamsAction)

相关文章

网友评论

  • 猫先生的一天:同问,出去重置路由以外,this.props.navigation.dispatch()和navigate效果不一样吗
  • 一往情深_b560:this.props.navigation.dispatch(), 没太明白这句什么时候调用

本文标题:ReactNavigation 之 navigation 方法

本文链接:https://www.haomeiwen.com/subject/ivcrnttx.html