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的区别需要注意

类似于navigatepush将跳转到堆栈中的新的路由 与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 获取参数 params
static  navigationOptions = ({navigation}) => ({
    headerTintColor: '#fff',
    headerTitle: navigation.state.params.title, //这是从上一级跳转携带的
    headerRight: <View>
              <TouchableOpacity onPress={() => {navigation.state.params.toOperate();}}>    //此处必须通过添加参数的形式来调用方法
                  <View><Text style={{color: '#fff', marginRight: 20}}>下一步</Text></View>
              </TouchableOpacity >
          </View>
})

9. this.props.navigation.setParams()

componentDidMount() {
    // toOperate同上面的state.params
    this.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官网 的内容,仅为方便理解,添加了个人的删改和解释,如有问题,望见谅。

原文地址:https://www.cnblogs.com/nangezi/p/10708282.html