天天看點

react-native結合react-navigation之TabNavigator

react-native開發需時肯定有tab的切換,或者頁面的轉調,當然用RN自身的Navigator 也可以但是也不是那麼友善react-navigation

就能滿足很多大部分需求,如下圖的三種切換方式,下面就說下TabNavigator 和StackNavigator的應用,才踏的一個坑,還是太年輕呀,橫刀一撸!!!!

react-native結合react-navigation之TabNavigator

主要的界面 用tab 切換即是TabNavigator, 切換如下圖

react-native結合react-navigation之TabNavigator

一共四個頁面當然配置就如下咯

TabNavigatorConfig更多具體的參數如下

如上都配置好了,就需要在螢幕上顯示 ,下面代碼作為展示 主要的還是建立了AppWithNavigationState 然後export 出他, 在root下調用

結合了redux , nav就是通過state 傳遞的,在redux目錄下建立了一個navigators/reducer

react-native結合react-navigation之TabNavigator

做到此處,是個tab的四個頁面切換還是可以的,問題就在與當我切換到下一個頁面時,就出現了狀況,

react-native結合react-navigation之TabNavigator

在沒有做進入下一個頁面前,提前ajax請求,當進入了請求,當然能請求成功,但是請求成功後,剛顯示的界面會還在顯示等待時,尼瑪傳回上一個界面

這麼說有點拗口,不解其意

react-native結合react-navigation之TabNavigator

額,,,, 清洗脫俗,驚鴻一瞥下就給直接傳回A了, console.log(this.props.nav)  看看了 輸出一次 nav.index = 0 

然後 1 然後 0 ··········就這麼又回到原點了,同時在AppWithNavigationState,解決辦法想了一個在navigators/reducer裡把nav傳遞的index固定了

有次當然可以解決,但是 tab按鈕不能點選咯,這真是尴尬的一幕,

當然還有個蛋疼的直接用TabNavigator 在AppWithNavigationState中的render 會運作四次,即第一個界面加載時,

console.log 輸出變知道 當然這樣也有辦法解決,react 的生命周期呀,最前面的兩個 執行個體化 和存在期,就在存在期入手,

render()就減小了開銷

問題是 tab還是不能點選啊!!!!!!!!

謎底是這樣  StackNavigator 需要這個!!!!

stackConfig 主要參數

react-native結合react-navigation之TabNavigator

 TabNavigator, StackNavigator配合應用就很好區分開了前者子產品頁面之間,後者Stack由字面了解就是通過棧的方式進行切換,最新的就壓入到棧頂顯示

在App 裡之前的就改為StackNavigator

到此就結束咯

不對之處,敬請更正··········

繼續閱讀