一、方法簡介

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官網 的內容，僅為方便理解，添加了個人的刪改和解釋，如有問題，望見諒。

react-navigation 3.x版本的push、navigate、goback、pop、dispatch等常用方法