React-Native学习之路（九）TabNavigator隐藏问题的分析及解决

  • Z时代
  • 2024-01-10
  • 分类：综合

react

首先说明一下我是用的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}把参数传过去就行了

以上是 React-Native学习之路（九）TabNavigator隐藏问题的分析及解决 的全部内容， 来源链接： utcz.com/z/382036.html

回到顶部