一、方法簡介
1. 應(yīng)用中的每個頁面組件都會自動提供?this.props.navigation
this.props.navigation可以獲取的一些方法：
navigate- 轉(zhuǎn)到另一個頁面, 計算出需要執(zhí)行的操作 ?。ǔＳ茫?/p>
goBack- 關(guān)閉活動屏幕并在堆棧中向后移動 ?。ǔＳ茫?/p>
addListener- 訂閱導航生命周期的更新
isFocused- 函數(shù)返回true如果屏幕焦點和false否則。
state- 當前狀態(tài)/路由 ?。ǔＳ茫?/p>
setParams- 對路由的參數(shù)進行更改 （常用）
getParam- 獲取具有回退的特定參數(shù) ?。ǔＳ茫?/p>
dispatch- 向路由發(fā)送 action （常用）
dangerouslyGetParent- 返回父級 navigator 的函數(shù)
注意： this.props.navigation并不是在所有頁面（組件）中都可以使用，而是必須在StackNavigator、DrawerNavigator中聲明的screen組件，才可以使用this.props.navigation
也就是說，screen組件會自動獲得這個props
this.props.navigation上還有一些方法取決于當前 navigator 的附加函數(shù)（StackNavigator 和?DrawerNavigator）
2. 如果是StackNavigator，除了以上方法，this.props.navigation還提供如下的一些方法：
push- 推一個新的路由到堆?！ 。ǔＳ茫?/p>
pop- 返回堆棧中的上一個頁面 ?。ǔＳ茫?/p>
popToTop- 跳轉(zhuǎn)到堆棧中最頂層的頁面 ?。ǔＳ茫?/p>
replace- 用新路由替換當前路由
reset- 操作會擦除整個導航狀態(tài)，并將其替換為多個操作的結(jié)果?！ 。ǔＳ茫?/p>
dismiss- 關(guān)閉當前堆棧
3. 如果是DrawerNavigator，除了以上方法，this.props.navigation還提供如下的一些方法：
openDrawer- 打開
closeDrawer- 關(guān)閉
toggleDrawer- 切換，如果是打開則關(guān)閉，反之亦然
由于筆者沒有使用過DrawerNavigator，在此就不做說明；
以上內(nèi)容均摘自react-navigation的官網(wǎng)，但是官網(wǎng)有點繁瑣，寫此以自用，有讀者也是我的幸運。
二、以上方法的使用
1. this.props.navigation.navigate()
onPress={() => navigate('ProfileScreen', { title: 'Profile' })}
說明：
功能：導航到某個路由 （即跳轉(zhuǎn)頁面）
使用：this.props.navigation.navigate(routeName, params, action)
參數(shù)：
routeName（必需）表示需要導航到的目標路由（即跳轉(zhuǎn)的目標頁面），是在StackNavigator?中聲明的screen頁面的名稱
params（可選）表示跳轉(zhuǎn)攜帶的參數(shù)，可以使用大括號攜帶多個，形式是key-value形式，在目標頁面使用this.props.navigation.state.params.xxx來獲取使用
action（可選）不常用，此處不做解釋
注意：3.x版本后，需要注意navigate和push的使用差別
Push- 在堆棧頂部添加一條路由，并導航至該路由. 與navigate的區(qū)別在于，如果有已經(jīng)加載的頁面，navigate方法將跳轉(zhuǎn)到已經(jīng)加載的頁面，而不會重新創(chuàng)建一個新的頁面。push總是會創(chuàng)建一個新的頁面，所以一個頁面可以被多次創(chuàng)建。--摘自官網(wǎng)
2. this.props.navigation.push()
onPress={() => push('ProfileScreen', { title: 'Profile' })}
說明： 功能作用完全同上，只是和navigate的區(qū)別需要注意
類似于navigate,push將跳轉(zhuǎn)到堆棧中的新的路由 與navigate的區(qū)別在于，如果有已經(jīng)加載的頁面，navigate方法將跳轉(zhuǎn)到已經(jīng)加載的頁面，而不會重新創(chuàng)建一個新的頁面。push總是會創(chuàng)建一個新的頁面，所以一個頁面可以被多次創(chuàng)建。--摘自官網(wǎng)
注意：與navigate相比較，push的使用范圍無疑是更廣的，它可以在相同的screen頁面間跳轉(zhuǎn)（只是頁面routeName相同，而參數(shù)params不同），
3. this.props.navigation.goback()
onPress={() =>this.props.navigation.goback()}
說明： 可以返回堆棧的上一頁面
功能： 關(guān)閉當前頁面并返回上一頁面
參數(shù)：可以是空（即表示僅僅返回上一個頁面，并關(guān)閉當前頁），
? ?可以有參數(shù)，表示回到指定頁面（關(guān)閉本頁面和指定頁面之間的所有頁面）
擴展：有參數(shù)情況的使用
//當前已使用以下導航堆棧：
navigation.navigate(SCREEN_KEY_A);
navigation.navigate(SCREEN_KEY_B);
navigation.navigate(SCREEN_KEY_C);
navigation.navigate(SCREEN_KEY_D);
//現(xiàn)在你在* screen D 上，并且想要回到 screen A *（銷毀D、C和B）
navigation.goBack(SCREEN_KEY_D)//將從 screen D 跳轉(zhuǎn)到 screen A
注意：
如果，* screen A * 在堆棧的頂部, 你可以使用navigation.popToTop()方法
gaoback()使用的參數(shù)，同navigate，應(yīng)該是在StackNavigator?中聲明的screen頁面的名稱
4. this.props.navigation.popToTop()
onPress={() =>this.props.navigation.popToTop()}
說明： 功能同上面的goback()，只是作用更單一，是回到堆棧的頂部
功能：?調(diào)用該方法將直接跳轉(zhuǎn)到堆棧最頂層的路由，銷毀其它所有頁面
5. this.props.navigation.pop()
onPress={() =>this.props.navigation.pop()}//也可以攜帶參數(shù)，n表示在堆棧內(nèi)返回幾層onPress={() =>this.props.navigation.pop(n)}
說明：??功能同上面的goback()、popToTop()，只是參數(shù)是不同的
功能：?返回到堆棧中的上一個頁面，如果提供一個參數(shù)n，則指定在堆棧內(nèi)返回幾層。
6. this.props.navigation.reset()
import { NavigationActions } from 'react-navigation'navigation.reset([NavigationActions.navigate({ routeName: 'HomeScreen' })], 0)
說明：?this.props.navigation.reset()是重置堆棧，并初始化到指定頁面（HomeScreen），也就是清空堆棧，一般在退出登錄的情況下操作
功能：?操作會擦除整個導航狀態(tài)，并將其替換為多個操作的結(jié)果。
擴展：也可使用dispatch執(zhí)行此操作：
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
? index: 0,
? actions: [NavigationActions.navigate({ routeName: 'HomeScreen' })],
});this.props.navigation.dispatch(resetAction);
參數(shù)：
index- * number *??- 必需 -routes數(shù)組中state的活動路由的索引。（此處0表示清空所以，從0開始）
actions-array- 必需 - 將取代導航狀態(tài)的導航行為數(shù)組。（即初始化）
key-string or null- 可選 - 如果設(shè)置，具有給定 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將任何導航操作發(fā)送到路由后，該操作都將具有最高優(yōu)先級。
參數(shù)： 就是你想重做的?NavigationActions 或者?StackActions中的方法及其參數(shù)
8. this.props.navigation.state
// 頁面可以通過 this.props.navigation.state訪問其路由。每一個都將返回一個對象, 其內(nèi)容如下:{
? //StackNavigator中聲明的screen名稱routeName: 'profileScreen,
? //用于路由排序的唯一標識，對于我們無用
? key: 'xxx',
? //攜帶參數(shù)
? params: { name: 'profile' }
}
說明： state可以獲取本頁面路由下的數(shù)據(jù)，尤其是params （可以通過前一頁面的跳轉(zhuǎn)攜帶，也可在本頁面通過setParams來設(shè)置）
功能：頁面可以通過this.props.navigation.state訪問其路由，獲取想要的東西，比如params等
使用：this.props.navigation.state.params.title等
// 通過 navigation.state 獲取參數(shù) paramsstatic? navigationOptions = ({navigation}) => ({
? ? headerTintColor: '#fff',
? ? headerTitle: navigation.state.params.title, //這是從上一級跳轉(zhuǎn)攜帶的headerRight: ? ? {navigation.state.params.toOperate();}}>//此處必須通過添加參數(shù)的形式來調(diào)用方法下一步? ? })
9. this.props.navigation.setParams()
componentDidMount() {
? ? // toOperate同上面的state.paramsthis.props.navigation.setParams({toOperate: () => {
? ? ? ? alert('操作')
? ? }})
}
說明：?setParams()可以設(shè)置參數(shù)，方便在頁面的頭部使用（即使用navigationOptions定義的頭部，當需要本頁面的數(shù)據(jù)時，必須通過setParams()傳遞，通過state.params去獲?。?/p>
功能：setParams方法允許頁面更改路由中的參數(shù)
10.?this.props.navigation.getParam()
// 使用state.params獲取this.props.navigation.state.params.title//使用getParam()獲取this.props.navigation.getParam('title', 'profile');
說明：?過去, 當params未定義時, 你可能在獲取params時遇到問題。 現(xiàn)在，你不必直接訪問參數(shù)，可以調(diào)用getParam方法。
功能： 獲取指定的參數(shù)，可以設(shè)置獲取失敗的返回值，比如上面的 title，當獲取不到時，使用 profile?作為默認值
三、
最后說明：全文使用?react-navigation官網(wǎng)的內(nèi)容，僅為方便理解，添加了個人的刪改和解釋，如有問題，望見諒。
