preface

When I used Taro to make a small program, I found that the configuration of tabBar was not very clear. There were also some differences in the official examples provided by wechat small program. So arrange a more reliable configuration scheme for your reference.

Keywords: tabBar, custom, custom-tab-bar, getTabBar, scope

The directory structure

The first step

Do the following in app.tsx config

TabBar: {// use custom tab-bar custom:true,
      color: 'rgba (0, 0, 0, 0.6)',
      selectedColor: 'rgba(0, 162, 0, 1)',
      backgroundColor: '#fff',
      borderStyle: 'white'List: [{pagePath: {pagePath: {pagePath: {pagePath: {pagePath: {pagePath:}}'pages/home/index',
          text: 'home',
          iconPath: './assets/icn_tab_home_normal.png',
          selectedIconPath: './assets/icn_tab_home_focus.png',
        },
        {
          pagePath: 'pages/classify/index',
          text: 'classification',
          iconPath: './assets/icn_tab_classify_normal.png',
          selectedIconPath: './assets/icn_tab_classify_focus.png',
        },
        {
          pagePath: 'pages/profile/index',
          text: 'I',
          iconPath: './assets/icn_tab_my_normal.png',
          selectedIconPath: './assets/icn_tab_my_focus.png',}]},Copy the code

The second step

Create a custom-tab-bar folder in the same directory as Pages and add the following files;

1, index. TSX file code example

Attention! The pagePath and image paths mentioned above are different from those configured in app.tsx. The file directories can be seen in the screenshot above.

import Taro from '@tarojs/taro';
import { CoverView, CoverImage } from '@tarojs/components';
import styles from './index.module.less';

const list = [
  {
    pagePath: '/pages/home/index',
    text: 'home',
    iconPath: '.. /assets/icn_tab_home_normal.png',
    selectedIconPath: '.. /assets/icn_tab_home_focus.png',
  },
  {
    pagePath: '/pages/classify/index',
    text: 'classification',
    iconPath: '.. /assets/icn_tab_classify_normal.png',
    selectedIconPath: '.. /assets/icn_tab_classify_focus.png',
  },
  {
    pagePath: '/pages/profile/index',
    text: 'I',
    iconPath: '.. /assets/icn_tab_my_normal.png',
    selectedIconPath: '.. /assets/icn_tab_my_focus.png',},]; Class CustomTabBar extends Taro.Component {state = {// Create a global variable to store selectedIndex // Create methods according to their own methods or the example provided by Taro // Of course no problem can be solved by the global variables are selected: global. GlobalData. SelectedIndex,}; switchTab = (item, index) => { const url = item.pagePath; global.globalData.selectedIndex = index; this.setState({ selected: index }); Taro.switchTab({ url }); }; shouldComponentUpdate = (_nextProps, nextState) => {returnthis.state.selected ! == nextState.selected; };render() {
    return (
      <CoverView className={styles.tabBar}>
        <CoverView className={styles.tabBarBorder} />
        {list.map((item, index) => {
          const isSelected = this.state.selected === index;
          return (
            <CoverView
              className={styles.tabBarItem}
              onClick={() => this.switchTab(item, index)}
              data-path={item.pagePath}
              key={item.text}
            >
              <CoverImage src={isSelected ? item.selectedIconPath : item.iconPath} />
              <CoverView
                style={{
                  color: isSelected ? 'rgba(0, 162, 0, 1)' : 'rgba (0, 0, 0, 0.6)', }} > {item.text} </CoverView> </CoverView> ); })} </CoverView> ); }}export default CustomTabBar;
Copy the code
2. Add the style file index.module.less
.tabBar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: white; display: flex; padding-bottom: env(safe-area-inset-bottom); }. TabBarBorder {background-color: rgba(0, 0, 0, 0.33); position: absolute; left: 0; top: 0; width: 100%; height: 1px; The transform: scaleY (0.5); } .tabBarItem { flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; } .tabBarItem cover-image { width: 24px; height: 24px; } .tabBarItem cover-view { font-size: 12px; }Copy the code

The third step

Add a method to update selectedIndex in all 3 page files, using home as an example:

import Taro, { useScope, useDidShow } from '@tarojs/taro';

const Home: Taro.FC = () => {
  const scope = useScope();

  useDidShow(() => {
    if (typeof scope.getTabBar === 'function' && scope.getTabBar()) {
      scope.getTabBar().$componentSetState ({/ / if you don't want to use global variables here directly write the index can be selected: globa. GlobalData. SelectedIndex,}); }});return (
    <View>home</View>
  );
};

Home.config = {
  navigationBarTitleText: 'home'};export default Home;
Copy the code

The same goes for the other pages

github

github.com/aisriver