React Native的原生路由

標籤：

新項目移動端要用React-native搭建,於是又開啟了新一波學習之旅

文檔裡查到的Navigator例子均為使用Navigator作為某個組件render方法的唯一傳回值,這在某些情況下有些不符合人類思維(或者說是我的思維...),例如:
,典型的上中下布局,進入訊息/朋友/朋友圈分別指向三個頁面,他們在互相切換時主要是頁面中間部分發生改變,上部只是改變了幾個文字,下部只是當前tab頁的表徵圖變為高亮

在這種需求下
一、我理想的實現方式為:

<View><Header /><Navigator /><Footer /></View>

在Navigator的renderScene雷根據路由改變當前組件的state,從而讓Header和Footer根據state渲染出不同的內容或樣式

try了一下不太行, 展示出的只有Header而已,似乎不作為組件唯一傳回值的Navigator根本不會顯示
想去找一下這個組件的 renderScene函數實現 功力不夠,沒找到...

 

鍥而不捨地重試了一下後,解決了 思路為:

    0.react以及rn有著很完備的錯誤偵測以及報錯資訊,既然沒報錯,猜想用法沒問題
    1.在由Navigator渲染的組件Login的render方法裡加了個alert,發現彈出了,說Navigator的功能正常,更加重了我的懷疑
    2.給包裹Navigator的view層加了背景色,發現它不是全屏的,猜想可能navi是非同步渲染的,導致父組件沒有撐開
    3.改變view的高度,發現露出了Login組件!!可以了!!之前沒顯示果然是因為container沒撐開,把它擋住了

二、在(一)還沒有搞定的時候,我退而求其次,採用路由提前聲明的方式? 

   可以使用Navigator的initialRouteStack屬性來初始化路由棧
   Navigator的renderscene函數可以返回另一個Navigator,通過這種依次嵌套的方式像react-router一樣提前聲明好整個用用的路由

 

三、navigationBar的使用?
    1.使用原生的<Navigator.NavigationBar> 該組件有一個routeMapper屬性,該屬性的值需要物件類型
該對象(可)包含三個固定的屬性,均為函數,傳回值為組件

LeftButton(route, navigator, index, navState) {//return Component}Title(route, navigator, index, navState) {//return Component}RightButton(route, navigator, index, navState) {//return Component}

注:<Navigator.NavigationBar>的源碼位置在

node_modules\react-native\Libraries\CustomComponents\Navigator

 

   2.上面的方法有一定的局限性,比如有4個按鈕就沒辦法了,我猜想應該是可以使用自訂對象的! 持續更新!

 

該探路項目的地址為https://github.com/youmuFE/reactNativeDemo 歡迎交流

React Native的原生路由