Taro: 自定义 tabbar 在微信小程序表现异常(Taro3.0.7)

[wangxiaocuo]

相关平台

微信小程序

复现仓库

https://github.com/wangxiaocuo/taro3-bugs.git
小程序基础库: 2.12.0
使用框架: React

复现步骤

1. 初次渲染报错
   

2. 第一次点击某个tab，报1的错，再次点击同一个tab，报错：
   

3. 重复点击各个tab，页面正常切换了，但是tabbar激活效果并未切换。自定以tabbar中的 setState 并未起作用

期望结果

自定义tabbar功能正常

实际结果

自定义tabbar功能异常

环境信息

```bash
Taro v3.0.7


  Taro CLI 3.0.7 environment info:
    System:
      OS: macOS 10.15.6
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.18.1 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.5 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.7 => 3.0.7
      @tarojs/mini-runner: 3.0.7 => 3.0.7
      @tarojs/react: 3.0.7 => 3.0.7
      @tarojs/runtime: 3.0.7 => 3.0.7
      @tarojs/taro: 3.0.7 => 3.0.7
      @tarojs/webpack-runner: 3.0.7 => 3.0.7
      babel-preset-taro: 3.0.7 => 3.0.7
      eslint-config-taro: 3.0.7 => 3.0.7
      react: ^16.10.0 => 16.13.1

```

[cncolder]

custom-tab-bar 在每个页面初始化时都会相应的初始化一个新实例, 即使是不需要显示 tabbar 的页面.
你的 setState 起作用了, 但是是在上一个页面的 tabbar 中起作用, 而上一个页面的 tabbar 在 switchTab 之后 unmount 了.
要想让 custom-tab-bar 符合原生 TabBar 的效果, 需要做的工作非常多.
这就是微信.

我曾经尝试过封装一个高阶组件, 最终效果仍然不太好. https://github.com/tarojsx/ui/blob/master/src/CustomTabBar.tsx

[wangxiaocuo]

custom-tab-bar 在每个页面初始化时都会相应的初始化一个新实例, 即使是不需要显示 tabbar 的页面.
你的 setState 起作用了, 但是是在上一个页面的 tabbar 中起作用, 而上一个页面的 tabbar 在 switchTab 之后 unmount 了.
要想让 custom-tab-bar 符合原生 TabBar 的效果, 需要做的工作非常多.
这就是微信.

我曾经尝试过封装一个高阶组件, 最终效果仍然不太好. https://github.com/tarojsx/ui/blob/master/src/CustomTabBar.tsx

我回头又去看了原生微信小程序的自定义tabbar代码片段。确实切换效果是在各个tabbar页面组件里面做的。

但是还是有疑惑，原生小程序代码片段中，页面组件由 Page() 变为了 Component()

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  }
})

现在疑问就变成了 this.getTabBar 该如何获取。我看 Taro2.x 有 this.$scope.getTabBar() 这样的写法可以获取原生组件实例，但是 Taro3.x this.$scope undefined。希望能得到解答。

另外一旦配置了自定义 tabbar 的 custom: true，就有报错，希望能及时修复。

🙏🙏🙏

[leo43555483]

我也出现了同样的错误，但是用函数组件写则不会报这个错，问题是该如何setData()。另外看来taro自定义tabbar问题不少哇，只能先放弃自定义了。

[luckyadam]

这个问题确实非常麻烦，目前建议自定义 tabbar 暂时用原生组件来实现

[wangxiaocuo]

这个问题确实非常麻烦，目前建议自定义 tabbar 暂时用原生组件来实现

我试试用原生组件

[JiaLe1]

2.x 是基于 Taro 的 Component ，
3.x 是基于 React 的 Component ，

自定义tabbar 3.x 有没有可运行的 demo？

[wangxiaocuo]

使用微信原生组件的形式引入自定义tabbar，不会报错。

然后在每个 tabbar 的页面组件中，componentDidShow 中添加以下代码。

import { getCurrentInstance } from '@tarojs/taro'

componentDidShow() {
  if (typeof getCurrentInstance().page.getTabBar === 'function') {
    const tabBar = getCurrentInstance().page.getTabBar()
    if (tabBar) {
      tabBar.setData({
        selected: 1
      })
    }
  }
}

另外，亲测，vue 的版本如果使用vue组件也会有问题，用原生组件也可以正常使用。

[luckyadam]

使用微信原生组件的形式引入自定义tabbar，不会报错。

然后在每个 tabbar 的页面组件中，componentDidShow 中添加以下代码。

import { getCurrentInstance } from '@tarojs/taro'

componentDidShow() {
  if (typeof getCurrentInstance().page.getTabBar === 'function') {
    const tabBar = getCurrentInstance().page.getTabBar()
    if (tabBar) {
      tabBar.setData({
        selected: 1
      })
    }
  }
}

另外，亲测，vue 的版本如果使用vue组件也会有问题，用原生组件也可以正常使用。

是的，原生组件没有问题，使用 React 或者 Vue 组件问题的原因正如 @cncolder 所提到的，我们后续想办法解决

[wangxiaocuo]

使用微信原生组件的形式引入自定义tabbar，不会报错。

然后在每个 tabbar 的页面组件中，componentDidShow 中添加以下代码。

import { getCurrentInstance } from '@tarojs/taro'

componentDidShow() {
  if (typeof getCurrentInstance().page.getTabBar === 'function') {
    const tabBar = getCurrentInstance().page.getTabBar()
    if (tabBar) {
      tabBar.setData({
        selected: 1
      })
    }
  }
}

另外，亲测，vue 的版本如果使用vue组件也会有问题，用原生组件也可以正常使用。

是的，原生组件没有问题，使用 React 或者 Vue 组件问题的原因正如 @cncolder 所提到的，我们后续想办法解决

好的，辛苦啦

[chenjiajing23]

可以考虑暂时用reudx管理custom-tar-bar的状态

[BigBugaboo]

我们团队也遇到这个问题，并且发现一些细致的问题，希望能供大家参考。
https://www.yuque.com/iyum9i/uur0qi/kkokl1

[BoringDays]

现在这个问题解决了没？

[zhaoyoushuai]

@wangxiaocuo 你好朋友，请问问题解决了吗