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官網 的內容,僅為方便理解,添加了個人的刪改和解釋,如有問題,望見諒。
react-navigation 3.x版本的push、navigate、goback、pop、dispatch等常用方法