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

posted @ 2019-04-14 23:38 南歌子阅读(8905) 评论(0) 编辑收藏举报

刷新页面返回顶部

南歌子