1. 程式人生 > >React-Native學習之路(九)TabNavigator隱藏問題的分析及解決

React-Native學習之路(九)TabNavigator隱藏問題的分析及解決

首先說明一下我是用的TabNavigator+StackNavigator來寫的頁面跳轉。

我們先分析一下為什麼在每個Tab的Item裡面實現跳轉,跳轉頁面還是會有底部的TabNvigator

先看下我出問題的專案結構,首先,我們可以看到我給這個Tab的Item指定的顯示頁面是MyPage,然後因為我MyPage中涉及一系列的跳轉,所以我用了一個StackNavigator來實現MyPage中的其他跳轉,這裡問題就來了,我在MyPage中進行的其他跳轉的其他頁面都會顯示底部的TabNavigator,問題就在這裡。

現在我出問題的結構是TabNavigator>StackNavigator,可以看見,我的StackNavigator是被TabNvigator包裹著的,而我們在其他頁面的跳轉都是在子頁面中進行的,所以那些頁面也是被TabNavigator包裹的,所以肯定會顯示。

現在弄清楚了問題,我們來找一下解決方案。既然我們知道是TabNavigator>StackNavigator這個結構的問題,那我們就需要改一下這個結構,改成StackNavigator>TabNavigator看行不行

好了,現在我通過StackNavigator進入TabNvigator了,但是我的Demo還是報錯了

找了一會兒,找到了原因

 這個Stack是我之前提到的我的MyPage中跳轉的路由,所以我在這裡面的跳轉的整個結構就是

StackNavigator>TabNavigator>StackNavigator

可以看到我的這個StackNavigator還是在Tab裡面的,所以我還需要把這個改出來,改的方法就是去掉最後一個StackNavigator,最後把所有的跳轉都弄在第一個StackNavigator裡面去讓專案結構變成簡單的StackNavigator>TabNavigator就行了

最後一個坑是

 可以對比下我上面的,因為上面的我是通過路由去跳轉,引數都在那裡傳,而改了之後就沒為其他頁面傳引數了,所以需要加上{...this.props}把引數傳過去就行了