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

相关推荐
Struggler2815 分钟前
Chrome插件开发
前端
前端 贾公子18 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜2 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控