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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值