setTabBarStyle:fail

[biluochun]

相关平台

H5

浏览器版本: Chrome 62
使用框架: React

复现步骤

配置 app.config.ts

  tabBar: {
    color: '#999999',
    selectedColor: '#FF5E00',
    backgroundColor: '#FFFFFF',
    borderStyle: 'white',
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页',
      },
      {
        pagePath: 'pages/mine/index',
        text: '我的',
      },
    ],
  },

在app.ts调用

      Taro.setTabBarStyle({
        color: '#999999',
        backgroundColor: '#FFFFFF',
        borderStyle: 'white',
      });

期望结果

调用正常执行

实际结果

Uncaught (in promise) {errMsg: "setTabBarStyle:fail"}

环境信息

  Taro CLI 3.2.8 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.18.1 - C:\Program Files\nodejs\node.EXE       
      Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD

---

补充信息

在文件webpack:///./node_modules/@tarojs/taro-h5/src/api/tabBar/index.js内设置断点

export function initTabBarApis (_App = {}) {
  tabConf = _App.state.__tabs; // 这一行设置断点
  App = _App
}

发现断点没被触发。

[cj0x39e]

由于 Taro H5 的组件是 Web Components，所以在 H5 端可以使用下面的方法实现你的需求。

const tabbar = document.getElementsByTagName('taro-tabbar')[0];
const updateConfig = {color: '#ff0000'};
// conf 是 taro tabbar 组件内部声明的 prop
tabbar.conf = {...tabbar.conf, ...updateConfig};

等我有空了来尝试修修这个 bug ...