如何讓 StackNaivgator 實現越級回跳

所謂越級回跳,就是 popN 的功能javascript

爲何須要越級回跳?由於個人 APP 透析記詞須要實現文件瀏覽,而越級回跳是一個很基礎的文件導航功能java

如何用 StackNavigator 實現這個功能?重任落到了 goBack 函數和路徑的 key 屬性上面react

key 屬性在this.props.navigation.state這個對象(object)中,是由系統自動生成的一個惟一標識git

key 能夠做爲 goBack 函數的參數,假設程序的導航路徑是 A -> B -> C -> D ,在 D 路徑上使用 goBack(keyOfB),將實現 D 到 A 的跳轉(是的,是跳回到 A,而不是 B)github

問題是如何在 D 路徑中得到 A(或者是 B)的 key,目前的實現方案是當 navigate 到下一個路徑時,須要把如今路徑的 key 以及以前路徑傳下來的 keys 一塊兒做爲參數 keys 傳給下一個路徑,函數

舉例從 B 導航到 C ,navigate 的寫法this

let { navigate, state } = this.props.navigation
  // 導航到 C
  // state.params.keys 是 array,包含以前路徑的 key
  navigate('DirViewOfC', {keys: state.params.keys.concat(state.key)})

在 C 路徑,就能夠經過this.props.navigation.state.params.keys得到以前路徑的 key。code

詳細的代碼實現能夠查看透析記詞的源碼
React Navigation 有關 Navigation Prop 的資料對象

相關文章
相關標籤/搜索