原生 tabBar

如何使用

配置方法和微信小程序相同，参考微信小程序开发文档全局配置tabBar

配置信息

• 在 app.config 中按正常填写 tabBar 项的相关配置（为了向下兼容）
• 所有作为 TabBar 页面的 config 里需要声明 usingComponents 项，也可以在 app.config 设置全局开启。

export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/hot/index',
  ],
  tabBar: {
    color: '#fffff',  // tab 上的文字默认颜色，仅支持十六进制颜色
    selectedColor: '#7D7ABC', // tab 上的文字选中时的颜色，仅支持十六进制颜色
    backgroundColor: '#ffffff', // tab 的背景色，仅支持十六进制颜色
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页',
      },
      {
        pagePath: 'pages/hot/index',
        text: '热门',
      },
    ],
  },
  usingComponents: {} // 声明自定义组件
})

这里给出的配置是全局配置了 usingComponents，全局开启需要注意一些事项

在 app.config 中声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。建议仅在此声明几乎所有页面都会用到的自定义组件。

• 注1：全局自定义组件会视为被所有页面依赖，会在所有页面启动时进行初始化，影响启动性能且会占用主包大小。只被个别页面或分包引用的自定义组件应尽量在页面配置中声明。
• 注2：在全局声明使用率低的自定义组件会大幅影响按需注入的效果。

上述配置完成后效果如图：

自定义 tabBar

如何使用

配置方法和微信小程序相同，开发前请仔细阅读 《微信小程序自定义 TabBar 文档》

配置方法

在 app.config.ts  配置 tabBar.custom 为 true

• 所有作为 TabBar 页面的 config 里需要声明 usingComponents 项，也可以在 app.config 设置全局开启。

export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/hot/index',
  ],
  tabBar: {
    custom: true,
    color: '#fffff',  // tab 上的文字默认颜色，仅支持十六进制颜色
    selectedColor: '#7D7ABC', // tab 上的文字选中时的颜色，仅支持十六进制颜色
    backgroundColor: '#ffffff', // tab 的背景色，仅支持十六进制颜色
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页',
      },
      {
        pagePath: 'pages/hot/index',
        text: '热门',
      },
    ],
  }
})

page/index/index.config.js

export default {
  navigationBarTitleText: '首页',
  usingComponents: {},
}

page/hot/index.config.js

export default {
  navigationBarTitleText: '热门',
  usingComponents: {},
}

添加 custom-tab-bar

在 src 目录下添加 custom-tab-bar 目录，在里面书写组件

custom-tab-bar/index.tsx

import { Component } from 'react'
import Taro from '@tarojs/taro'
import { CoverView, CoverImage } from '@tarojs/components'

import './index.scss'

export default class Index extends Component {
  state = {
    selected: 0,
    color: '#000000',
    selectedColor: '#DC143C',
    list: [
      {
        pagePath: '/pages/index/index',
        selectedIconPath: '../images/tabbar_home_on.png',
        iconPath: '../images/tabbar_home.png',
        text: '首页'
      },
      {
        pagePath: '/pages/hot/index',
        selectedIconPath: '../images/tabbar_cate_on.png',
        iconPath: '../images/tabbar_cate.png',
        text: '热门'
      }
    ]
  }

  switchTab(index, url) {
    this.setSelected(index)
    Taro.switchTab({ url })
  }

  setSelected (idx: number) {
    this.setState({
      selected: idx
    })
  }

  render() {
    const { list, selected, color, selectedColor } = this.state

    return (
      <CoverView className='tab-bar'>
        <CoverView className='tab-bar-border'></CoverView>
        {list.map((item, index) => {
          return (
            <CoverView key={index} className='tab-bar-item' onClick={this.switchTab.bind(this, index, item.pagePath)}>
              <CoverImage src={selected === index ? item.selectedIconPath : item.iconPath} />
              <CoverView style={{ color: selected === index ? selectedColor : color }}>{item.text}</CoverView>
            </CoverView>
          )
        })}
      </CoverView>
    )
  }
}

图片资源引用

使用 React 开发自定义 TabBar 时，可以不使用 import 或 require 引用图片资源（Taro 会自动根据 TabBar 配置处理）。

如果使用了 import、require 或使用 background-image 时需要关注图片是否被 url-loader 处理为 base64，base64 的图片在 TabBar 中不能展示。