天天看点

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

到此就结束咯

不对之处,敬请更正··········

继续阅读