一、方法简介
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官网的内容，仅为方便理解，添加了个人的删改和解释，如有问题，望见谅。
网友评论