React + antd-mobile实现Tabbar

前言

前两天在发布了自己的第一篇文章,[React的入门](React入门 - 掘金 (juejin.cn)),介绍了React的安装、脚手架、JSX语法和组件,今天,记录一下Tabbar+路由跳转的实现。

安装

话不多说,直接实现效果↓↓↓

首先是需要下载 react-router-dom路由和antd-mobile组件库

npm install antd-mobile@2.3.1 --save //组件库

npm i react-router-dom@5 //路由

注意:这里我用的路由是5.3.4版本的,组件库用的是2.3.1版本的,都是之前的老版本,新版本请查看官方文档,后续我也会写新版本的tabbar

App.js

在这个文件中,我是先导入路由和我的Tabbar组件,我的路径是默认跳转到tabbar页面

javascript 复制代码
//导入组件
import {Home} from './pages/Home'

//导入路由
import { BrowserRouter as Router,Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Route path='/' component={Home}></Route>
      </div>
    </Router>
  );
}

实现Tabbar

这里我的思路是,先创建四个页面(因为常规Tabbar都是四个选项),然后把这四个页面导出,再创建一个单独的文件用来接受这四个界面,这个单独的页面才是用来做我们Tabbar的实现。

scala 复制代码
//这是四个页面的其中之一
import React from 'react'

export const My = class  extends React.Component{
    render(){
        return (
            <div>我的</div>
        )
    }
}

我设置的tabbar实现页面为home,在我的home页面中,也是需要导入路由和组件库,同时也要记得导入其他四个页面👇👇👇

//导入组件 复制代码
import { Posts } from '../Posts'
import { Have } from '../Have'
import { News } from '../News'
import { My } from '../My'

//导入路由
import {BrowserRouter as Router, Route } from 'react-router-dom'

//导入组件库
import { TabBar } from 'antd-mobile'

导入完成之后,在我们文件中设置跳转其他页面的路由 ,代码如下 ↓↓↓

xml 复制代码
                <Route exact path='/' component={Posts}></Route>
                <Route path='/news' component={News}></Route>
                <Route path='/have' component={Have}></Route>
                <Route path='/my' component={My}></Route>

之后进入'antd-mobile'官网(注意是2.3.1版本的) 找到Tabbar组件 , 将相应代码CV到home中,根据需求进行删改即可↓↓↓

复制代码
                    <TabBar
                        unselectedTintColor="#949494"
                        tintColor="#33A3F4"
                        barTintColor="white"
                        hidden={this.state.hidden}

                    >
                        <TabBar.Item
                            title="职位"
                            key="职位"
                            icon={<i>1</i>}
                            selectedIcon={<b>1</b>}
                            selected={this.state.selectedTab === '/'}
                            //点击切换路由
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/',
                                });
                                this.props.history.push('/')
                            }}
                        >
                        </TabBar.Item>
                        <TabBar.Item
                            icon={<i>2</i>}
                            selectedIcon={<b>2</b> }
                            title="有了"
                            key="有了"
                            selected={this.state.selectedTab === '/have'}
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/have',
                                });
                                this.props.history.push('/have')
                            }}
                        >

                        </TabBar.Item>
                        <TabBar.Item
                            icon={<i>3</i>}
                            selectedIcon={<b>3</b>}
                            title="消息"
                            key="消息"
                            selected={this.state.selectedTab === '/news'}
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/news',
                                });
                                this.props.history.push('/news')
                            }}
                        >

                        </TabBar.Item>
                        <TabBar.Item
                            icon={<i>4</i>}
                            selectedIcon={<b>4</b>}
                            title="我的"
                            key="我的"
                            selected={this.state.selectedTab === '/my'}
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/my',
                                });
                                this.props.history.push('/my')
                            }}
                        >
                        </TabBar.Item>
                    </TabBar>
                </div>

这样一个简单的根据路由跳转的Tabbar页面就实现啦

后语

这是一个很简单的技术点,因为刚开始学习React,所以记录一下自己的学习内容,也锻炼一下自己写文章的能力。希望看到文章的各位无病无疾,天天开心!

相关推荐
01传说22 分钟前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
烛阴2 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子3 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z3 小时前
CSS揭秘:10.平行四边形
前端·css·css3