小红书小程序隐藏hideTabBar失效

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

前言

小红书小程序的坑真的是深不见底啊，我前两天刚爬出来登录按钮失效的坑，这又掉进了原生tabBar无法隐藏的坑里面了。具体的表现现象是这样的：

小红书开发者工具中正常，tabBar可以正常隐藏掉，但是进行真机调试时，发现tabBar无法成功隐藏掉。

场景还原

背景介绍

框架：底层基于Taro3框架进行开发

tabBar配置代码：

    tabBar: {
        list: [
          {
            pagePath: "pages/index/index",
            text: "首页",
          },
          {
            pagePath: "pages/mine/mine",
            text: "我的",
          }
        ],
        selectedColor: "#f87987",
        color: "#333"
    },

特殊说明：这里只是为了进行代码演示，就没有做很详细的配置，只是能展示出tabBar即可。

表现效果图：

需求描述

由于我们的需求需要进行动态处理tabBar，最终定下的技术方案是：隐藏掉原生tabBar，通过自定义tabBar来实现动态处理；

通过查找小红书官方文档，我们找到了hideTabBar来实现原生tabBar的隐藏。

隐藏tabBar代码示例，更多的配置项说明可以自行前往官网查看：

    Taro.hideTabBar();

真机暴雷

开发过程中，舒舒服服的搞完了，直到测试介入。测试找到我这里，跟我说需求没有实现，距离测试通过十万八千里，测试bug疯狂的call到我这里来。

我拿自己的手机一测，内心万马奔腾！！！

开发者工具效果如下：

真机效果如下：

这就很难受了，内心崩溃的边缘了。开发小程序的时候，这种模拟器和真机表现不一致的问题相对来说不好排查，解决难度系数相对来说较高。

解决问题

初步猜想

万幸这个api提供了success和fail的回调钩子，先瞅一下真机上这个api是success了还是fail了。不测不知道，一测下了我一跳，通过调试工具，我发现还真就是api报错了，并且输出了错误信息：

call function: 'hideTabBar', Parameter: 'animation' Value is vaild

经过一通百度，感觉说的animation大致应该是一个用来配置动画类型的值（下图内容仅供参考）：

灵光一现

正在我一筹莫展的时候，我忽然想起来好像微信小程序存在同样的问题，并成功解决掉了，有没有可能跟小红书是一样的问题呢？

我决定大胆一试，经过测试发现，确实可以成功隐藏掉小红书的原生tabBar了。

结语

好了，小红书小程序真机调试时，hideTabBar无法隐藏原生tabBar的问题就被解决掉了，但是为什么会出现这个问题我还没有探索到。如果我get到了的话，后续会跟大家分享一下。

希望这篇文章对大家有所帮助，欢迎大家在下方留言交流。