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 歡迎交流