React Native之 Navigator與NavigatorIOS使用

前言

• 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí)

• 本人接觸 React Native 時間并不是特別長，所以對其中的內(nèi)容和性質(zhì)了解可能會有所偏差，在學(xué)習(xí)中如果有錯會及時修改內(nèi)容，也歡迎萬能的朋友們批評指出，謝謝

• 文章第一版出自簡書，如果出現(xiàn)圖片或頁面顯示問題，煩請轉(zhuǎn)至 簡書 查看 也希望喜歡的朋友可以點贊，謝謝

Navigator 與 NavigatorIOS 介紹

• 開發(fā)中，幾乎所有的APP中或多或少都會涉及到多個界面間的切換，在React Native中有兩個組件負責(zé)實現(xiàn)這樣的效果 —— Navigator 和 NavigatorIOS

• Navigator可以在iOS和Android同時使用，而NavigatorIOS則是包裝了UIKit庫的導(dǎo)航功能，使用戶可以使用左劃功能來返回到上一界面

Navigator 屬性

• 官方文檔中是這樣解釋的：使用導(dǎo)航器可以讓你在應(yīng)用的不同場景（頁面）間進行切換。導(dǎo)航器通過路由對象來分辨不同的場景。利用renderScene方法，導(dǎo)航欄可以根據(jù)指定的路由來渲染場景

• 可以通過configureScene屬性獲取指定路由對象的配置信息，從而改變場景的動畫或者手勢。查看Navigator.SceneConfigs來獲取默認的動畫和更多的場景配置選項

• configureScene：可選的函數(shù)，用來配置場景動畫和手勢。會帶有兩個參數(shù)調(diào)用（一個是當(dāng)前的路由，一個是當(dāng)前的路由棧）然后它會返回一個場景配置對象
  • Navigator.SceneConfigs.PushFromRight（默認）
    
    
    

  (route, routeStack) => Navigator.SceneConfigs.FloatFromRight

  效果：