react-navigation 3.x版本的push、navigate、goback、pop、dispatch等常用方法

一、方法简介

1. 应用中的每个页面组件都会自动提供 this.props.navigation

this.props.navigation可以获取的一些方法:

navigate- 转到另一个页面, 计算出需要执行的操作  (常用)

goBack- 关闭活动屏幕并在堆栈中向后移动  (常用)

addListener- 订阅导航生命周期的更新

isFocused- 函数返回true如果屏幕焦点和false否则。

state- 当前状态/路由  (常用)

setParams- 对路由的参数进行更改  (常用)

getParam- 获取具有回退的特定参数  (常用)

dispatch- 向路由发送 action  (常用)

dangerouslyGetParent- 返回父级 navigator 的函数

注意: this.props.navigation并不是在所有页面(组件)中都可以使用,而是必须在StackNavigator、DrawerNavigator中声明的screen组件,才可以使用this.props.navigation

也就是说,screen组件会自动获得这个props


this.props.navigation上还有一些方法取决于当前 navigator 的附加函数(StackNavigator 和 DrawerNavigator)

2. 如果是StackNavigator,除了以上方法,this.props.navigation还提供如下的一些方法:

push- 推一个新的路由到堆栈  (常用)

pop- 返回堆栈中的上一个页面  (常用)

popToTop- 跳转到堆栈中最顶层的页面  (常用)

replace- 用新路由替换当前路由

reset- 操作会擦除整个导航状态,并将其替换为多个操作的结果。  (常用)

dismiss- 关闭当前堆栈

3. 如果是DrawerNavigator,除了以上方法,this.props.navigation还提供如下的一些方法:

openDrawer- 打开

closeDrawer- 关闭

toggleDrawer- 切换,如果是打开则关闭,反之亦然

由于笔者没有使用过DrawerNavigator,在此就不做说明;

以上内容均摘自react-navigation的官网,但是官网有点繁琐,写此以自用,有读者也是我的幸运。


二、以上方法的使用

1. this.props.navigation.navigate()

onPress={() => navigate('ProfileScreen', { title: 'Profile' })}

说明:

功能:导航到某个路由 (即跳转页面)

使用:this.props.navigation.navigate(routeName, params, action)

参数:

routeName(必需)表示需要导航到的目标路由(即跳转的目标页面),是在StackNavigator 中声明的screen页面的名称

params(可选)表示跳转携带的参数,可以使用大括号携带多个,形式是key-value形式,在目标页面使用this.props.navigation.state.params.xxx来获取使用

action(可选)不常用,此处不做解释

注意:3.x版本后,需要注意navigate和push的使用差别

Push- 在堆栈顶部添加一条路由,并导航至该路由. 与navigate的区别在于,如果有已经加载的页面,navigate方法将跳转到已经加载的页面,而不会重新创建一个新的页面。push总是会创建一个新的页面,所以一个页面可以被多次创建。--摘自官网


2. this.props.navigation.push()

onPress={() => push('ProfileScreen', { title: 'Profile' })}

说明: 功能作用完全同上,只是和navigate的区别需要注意

类似于navigate,push将跳转到堆栈中的新的路由 与navigate的区别在于,如果有已经加载的页面,navigate方法将跳转到已经加载的页面,而不会重新创建一个新的页面。push总是会创建一个新的页面,所以一个页面可以被多次创建。--摘自官网

注意:与navigate相比较,push的使用范围无疑是更广的,它可以在相同的screen页面间跳转(只是页面routeName相同,而参数params不同),


3. this.props.navigation.goback()

onPress={() =>this.props.navigation.goback()}

说明: 可以返回堆栈的上一页面

功能: 关闭当前页面并返回上一页面

参数:可以是空(即表示仅仅返回上一个页面,并关闭当前页),

      可以有参数,表示回到指定页面(关闭本页面和指定页面之间的所有页面)

扩展:有参数情况的使用

//当前已使用以下导航堆栈:

navigation.navigate(SCREEN_KEY_A);

navigation.navigate(SCREEN_KEY_B);

navigation.navigate(SCREEN_KEY_C);

navigation.navigate(SCREEN_KEY_D);

//现在你在* screen D 上,并且想要回到 screen A *(销毁D、C和B)

navigation.goBack(SCREEN_KEY_D)//将从 screen D 跳转到 screen A

注意:

如果,* screen A * 在堆栈的顶部, 你可以使用navigation.popToTop()方法

gaoback()使用的参数,同navigate,应该是在StackNavigator 中声明的screen页面的名称


4. this.props.navigation.popToTop()

onPress={() =>this.props.navigation.popToTop()}

说明: 功能同上面的goback(),只是作用更单一,是回到堆栈的顶部

功能: 调用该方法将直接跳转到堆栈最顶层的路由,销毁其它所有页面


5. this.props.navigation.pop()

onPress={() =>this.props.navigation.pop()}//也可以携带参数,n表示在堆栈内返回几层onPress={() =>this.props.navigation.pop(n)}

说明:  功能同上面的goback()、popToTop(),只是参数是不同的

功能: 返回到堆栈中的上一个页面,如果提供一个参数n,则指定在堆栈内返回几层。


6. this.props.navigation.reset()

import { NavigationActions } from 'react-navigation'navigation.reset([NavigationActions.navigate({ routeName: 'HomeScreen' })], 0)

说明: this.props.navigation.reset()是重置堆栈,并初始化到指定页面(HomeScreen),也就是清空堆栈,一般在退出登录的情况下操作

功能: 操作会擦除整个导航状态,并将其替换为多个操作的结果。

扩展:也可使用dispatch执行此操作:

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

const resetAction = StackActions.reset({

  index: 0,

  actions: [NavigationActions.navigate({ routeName: 'HomeScreen' })],

});this.props.navigation.dispatch(resetAction);

参数:

index- * number *  - 必需 -routes数组中state的活动路由的索引。(此处0表示清空所以,从0开始)

actions-array- 必需 - 将取代导航状态的导航行为数组。(即初始化)

key-string or null- 可选 - 如果设置,具有给定 key 的导航器将重置。 如果为null,则根导航器将重置。


7. this.props.navigation.dispatch()

import { NavigationActions } from 'react-navigation';

const navigateAction = NavigationActions.navigate({

  routeName: 'ProfileScreen',

  params: {},

  // navigate can have a nested navigate action that will be run inside the child router (navigate 可以用有一个嵌套的navigate 操作)action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),

});this.props.navigation.dispatch(navigateAction);

说明: dispatch() 可以重新定义任何导航操作(比如navigate,push,reset等),上面的reset()方法的扩展也是使用的dispatch

功能:使用dispatch将任何导航操作发送到路由后,该操作都将具有最高优先级。

参数: 就是你想重做的 NavigationActions 或者 StackActions中的方法及其参数


8. this.props.navigation.state

// 页面可以通过 this.props.navigation.state访问其路由。每一个都将返回一个对象, 其内容如下:{

  //StackNavigator中声明的screen名称routeName: 'profileScreen,

  //用于路由排序的唯一标识,对于我们无用

  key: 'xxx',

  //携带参数

  params: { name: 'profile' }

}

说明: state可以获取本页面路由下的数据,尤其是params (可以通过前一页面的跳转携带,也可在本页面通过setParams来设置)

功能:页面可以通过this.props.navigation.state访问其路由,获取想要的东西,比如params等

使用:this.props.navigation.state.params.title等

// 通过 navigation.state 获取参数 paramsstatic  navigationOptions = ({navigation}) => ({

    headerTintColor: '#fff',

    headerTitle: navigation.state.params.title, //这是从上一级跳转携带的headerRight:                {navigation.state.params.toOperate();}}>//此处必须通过添加参数的形式来调用方法下一步                        })


9. this.props.navigation.setParams()

componentDidMount() {

    // toOperate同上面的state.paramsthis.props.navigation.setParams({toOperate: () => {

        alert('操作')

    }})

}

说明: setParams()可以设置参数,方便在页面的头部使用(即使用navigationOptions定义的头部,当需要本页面的数据时,必须通过setParams()传递,通过state.params去获取)

功能:setParams方法允许页面更改路由中的参数


10. this.props.navigation.getParam()

// 使用state.params获取this.props.navigation.state.params.title//使用getParam()获取this.props.navigation.getParam('title', 'profile');

说明: 过去, 当params未定义时, 你可能在获取params时遇到问题。 现在,你不必直接访问参数,可以调用getParam方法。

功能: 获取指定的参数,可以设置获取失败的返回值,比如上面的 title,当获取不到时,使用 profile 作为默认值


三、

最后说明:全文使用 react-navigation官网的内容,仅为方便理解,添加了个人的删改和解释,如有问题,望见谅。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容