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,所以记录一下自己的学习内容,也锻炼一下自己写文章的能力。希望看到文章的各位无病无疾,天天开心!

相关推荐
CodeSheep4 分钟前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅8 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒1 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css