React native路由跳轉navigate、push、replace的區別


由於沒有系統的去學習RN,對路由跳轉了解不多,只是跟着項目在做,抽點時間簡單學習一下RN路由跳轉方法區別,總結如下:

如上圖,外部是一個棧容器,此時A頁面在最底部,navigate到B頁面,為什么此時用navigate沒有用push呢,因為在棧內沒有B頁面時,用navigate和push是一樣的,都是進行入棧操作,沒有區別,出於習慣使用navigate。下一步,B頁面push了一個B頁面,此時為何不使用navigate呢,因為棧內若已經存在一個相同頁面,navigate就會失去跳轉頁面的效果,B navigate B代碼不會報錯,但是也不會進行跳轉,因為棧內已經有了B,只有使用push才會進行新的B頁面進行入棧操作。現在了解了navigate與push的區別,看上圖,進行了一系列入棧操作,形成最終的棧圖,下面分三種情況討論。

1.現在我們處於C頁面,若C push A,同樣會執行A的繼續入棧,但此時若使用C navigate A,則A以上全部頁面會執行出棧操作,相當於popToTop方法,回到A頁面;

2.現在處於C頁面,若C push B,同樣會執行B的繼續入棧,但此時若使用C navigate B,則會當前的C開始向下尋找B界面,直到找到最近的B界面,進行跳轉,C與B中間的頁面全部出棧,此時B還可以繼續進行返回,一步步返回至A頁面;

3.還有一種與圖無關的情況,A navigate BrowserPage,此時app接收到一個推送,點擊推送進入了新的BrowserPage,若收到推送后跳轉頁面的邏輯使用的是navigate方法,此時就會出現無法跳轉的情況,因為BrowserPage已經在棧內存在(剛剛在瀏覽網頁),所以此處要使用push方法進行入棧操作;

4.A頁面navigate B頁面,A收到通知要navigate到C界面,此時C入棧並覆蓋了B,此時點擊返回是回到B界面,因為C執行出棧操作后到了B,而不會直接回到A;

5.replace方法,

  • replace - replace the current route with a new one

  據官方文檔介紹,是用一個新的路由替換掉當前的路由,即使用新的頁面替換當前的頁面,假設有這樣的場景,A navigate到B,B完成任務后要到C,C返回的不是B,而是A,此時使用B replace C即可實現需求。

 

以上就是對幾種跳轉方法的粗略介紹,歡迎指出問題。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM