类似微信的底部Tab导航的实现思路是怎样的?



  • 想要实现这样的效果:
    http://img2.tuicool.com/UJBnAn.png!web

    我目前的做法是:
    1、界面由“根容器”、“内容区”、“导航栏”组成。内容区与导航栏是兄弟关系,根容器是他们的父组件
    2、根容器有个state,用来决定内容区显示那个内容
    3、每个导航按钮加都一个onPress,点击后通过setState改变内容区的内容

    这样做勉强可以用,但问题是每次改变state后,整个根容器都重新render了一遍。导致一个问题:如果我的某个内容页是一个列表,用户已经下拉到某个地方,他点了其他导航按钮然后再切换回来,这个列表又重新render了,用户又要从头拉起,这样的用户体验似乎不太好。

    所以问题是,想要实现这种底部导航切换页面,而又能“保存页面状态”,比如用户列表拉动的位置,最佳思路和最佳实践是怎样的(我这种肯定不是-_-),希望大家不吝赐教,谢谢了!



  • 别急 等NavigationExperiment



  • 0.22版本里Examples中的UIExplorer里已经有Navigation (Experimental) 的用法,其中就有Tabs,可以看看FB的代码。



  • @mozillo @irrigator 谢谢楼上两位!把UIExplorer里的代码拖下来运行了一下,里面的NavigationExperimental看起来确实是可以实现我这种需求的,但从名字上看似乎是一个实验性质的东东,目前能用到生产环境吗?
    另外,NavigationExperimental也是用来实现各种跳转的,貌似也可以push和pop,那么它跟Navigator是什么关系?


  • administrators

    @haisenbug 稳定后会替换掉现有的navigator



  • @sunnylqm 那真是挺不错的,NavigationExperimental功能看起来更强大



  • 把几个tab的内容都输出, 但是根据state来选择显示哪一个
    切换的时候, 设置将要被切换的scene的样式为: {position: 'absolute', top: 10000, left: 10000}, 隐藏起来



  • lz 这个要求用 Navigation 就可以实现啊,不过需要将真个 tabbar 定义的几个视图作为主视图,也就是 Navigation 的一个 scene,我现在就是这么搞的,而且切换 tab 也可以保持住位置。

    不过用 tabbarIOS 发现一个问题,在发布了 release 版本到手机上之后切换 tab 的时候能感到明显的延迟,不知是怎么回事。



  • @kiliwalk 这倒是个简单的方式,但是把所有内容都输出,性能上会不会有问题?特别是我每一个tab里面的内容都是要通过api远程fecth过来的,首次加载的耗费的时间不敢想象啊。。


  • administrators

    @haisenbug 那你还需要做本地缓存



  • @郁也风 你说的是现有的Navigator组件吗?我也尝试过,我做的是整个视图(内容区+tabbar)作为一个scene,每次切换的时候整个视图都在随着切换动画动,感觉也不太好。。。你是做到了只让内容区有切换动画吗?



  • @haisenbug 我的方式是4个 tab 加上4个视图作为主界面,如果用的是 TabBarIOS 的话应该不会改变前一个视图的位置啊



  • 请问楼主是如何解决这个问题的,求指导


登录后回复