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官网的内容,仅为方便理解,添加了个人的删改和解释,如有问题,望见谅。

你可能感兴趣的:(react-navigation 3.x版本的push、navigate、goback、pop、dispatch等常用方法)