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