前言

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

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

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

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

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

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

  • 可以通過(guò)configureScene屬性獲取指定路由對(duì)象的配置信息，從而改變場(chǎng)景的動(dòng)畫(huà)或者手勢(shì)。查看Navigator.SceneConfigs來(lái)獲取默認(rèn)的動(dòng)畫(huà)和更多的場(chǎng)景配置選項(xiàng)

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


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

    效果：