taro/src/components/navigation/TabBar.tsx

import { View, Text } from '@tarojs/components'
import './TabBar.scss'
import Taro from '@tarojs/taro';
import { useState } from 'react';
import { useSelector } from 'react-redux';
import { ColorType } from '@/context/themes/color';

export default function Component(props: { index: number }) {
    const common = useSelector((state: any) => state.common);
    const [selIndex] = useState(props.index)
    function switchTab(index: number) {
        switch (index) {
            case 0:

                Taro.switchTab({
                    url: '/pages/clock/Clock'
                })
                break;
            case 2:

                Taro.switchTab({
                    url: '/pages/explore/Index'
                })
                break;
            case 1:
                Taro.switchTab({
                    url: '/pages/metric/Metric'
                })
                break;
            // case 2:

            //     Taro.switchTab({
            //         // url: '/pages/activity/Activity'
            //         url:'/pages/workout/Workout'
            //     })
            //     break;
            case 3:
                Taro.switchTab({
                    url: '/pages/account/Profile'
                })
                break;
            case 4:
                Taro.switchTab({
                    url: '/pages/food/Food'
                })
                break;
        }
    }

    return <View className='tabbar'>
        <View className={selIndex == 0 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(0)}>
            <Text>生物钟</Text>
        </View>
        {/* <View className={selIndex == 4 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(4)}>
            <View style={{ position: 'relative' }}>
                <Text>饮食</Text>
                {
                    common.showFoodTabBadge && process.env.TARO_ENV == 'weapp' && <View className='food-tab-badge' style={{ backgroundColor: ColorType.food }} />
                }
            </View>

        </View>
        <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
            <Text>运动</Text>
        </View> */}
        <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
            <Text>发现</Text>
        </View>
        <View className={selIndex == 1 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(1)}>
            <Text>指标</Text>
        </View>


        <View className={selIndex == 3 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(3)}>
            <Text>更多</Text>
        </View>
    </View>
}