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中，根据需求进行删改即可↓↓↓

<div 复制代码

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