React Native的原生路由

新項目移動端要用React-native搭建,因而又開啓了新一波學習之旅

文檔裏查到的Navigator例子均爲使用Navigator做爲某個組件render方法的惟一返回值,這在某些狀況下有些不符合人類思惟(或者說是個人思惟...),例如:
微信,典型的上中下佈局,進入消息/朋友/朋友圈分別指向三個頁面,他們在互相切換時主要是頁面中間部分發生改變,上部只是改變了幾個文字,下部只是當前tab頁的圖標變爲高亮

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

<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沒撐開,把它擋住了

2、在(一)尚未搞定的時候,我退而求其次,採用路由提早聲明的方式? 

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

 

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