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}把参数传过去就行了

猜你喜欢

转载自blog.csdn.net/Leon_Jcy/article/details/81348616