React-vant

版本

https://react-vant-gitee.3lang.dev/ -- react-vant

安装

使用 npm 或 yarn 安装#

# 通过 npm 安装
npm i react-vant

# 通过 yarn 安装
yarn add react-vant

使用

import React from 'react'
import { useNavigate, useLocation} from 'react-router-dom'
import React from 'react'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, LikeO  } from '@react-vant/icons'

const Tab = () =>{
    const tabs = [
        {
          name: '/',
          title: '首页',
          icon: <HomeO />,
        },
        {
          name: '/user/base/contact',
          title: '新建',
          icon: <LikeO />,
        },
        {
          name: '/user/base/index',
          title: '我的',
          icon: <FriendsO />,
        },
    ]
    const navigate = useNavigate()

    const location = useLocation()

    const [tabName,settabName]  = React.useState('/')

    React.useEffect(() => {
        settabName(location.pathname)
    })

    // 切换标签时触发事件
    const onChangeTab = (val) => {
        settabName(val)
        navigate(val)
    }

        return (
            <div className="tabbar">
                <TabBar value={tabName} onChange={onChangeTab}  className="item">
                    {tabs.map(item => (
                        <TabBar.Item name={item.name} icon={item.icon}>{item.title}</Tabbar.Item>
                    ))}
                </TabBar>
            </div>
        )

}

export default Tab

组件更改样式

// React 脚手架里面已经配置了 Sass，只需要安装 Sass即可；

npm install sass-loader node-sass --save-dev

// 页面使用
import React from 'react'
import styles from './contactadd.scss'

 return (
    <div className="contacttype">
        <TabBar value={tabName} onChange={onChangeTab}  className="item">
            {tabs.map(item => (
                <TabBar.Item name={item.name} icon={item.icon}>{item.title}</Tabbar.Item>
            ))}
        </TabBar>
    </div>
)


contactadd.scss

// 自定义样式名
.contacttype{
    // 组件样式名
    .rv-tabbar-item--active{
       color:red;
    }
}