react手机端TabBar用法

最新推荐文章于 2023-02-17 16:37:09 发布
最新推荐文章于 2023-02-17 16:37:09 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 暴走的react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41166682/article/details/109063563
版权

在路由组件中使用嵌套路由

import React from 'react'
import { TabBar } from 'antd-mobile';
import {Route} from 'react-router-dom'
import Index from '../../pages/Index' // 引入子组件，下面生成嵌套路由
import HouseList from '../../pages/HouseList' // 引入子组件，下面生成嵌套路由
import News from '../../pages/News' // 引入子组件，下面生成嵌套路由
import Profile from '../../pages/Profile' // 引入子组件，下面生成嵌套路由
// 导入自己组件内部的样式文件
import './index.css'
export default class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname, // 默认选中哪个tabbar
    // hidden: false, // 用于控制tabar显示与隐藏的... 这里不需要隐藏，去掉
    // fullScreen: false, // 是否是全屏，tabbar在底部...此项目不需要动态控制TarbBar的位置，所以不要
  };
  render () {
    return (
      // 嵌套路由中不能用<Router></Router>包裹，否则路由将跳转不了
      // <Router>
      <div className="home">
        {/* 设置导航菜单 因为此处tabbar没有link功能，所以利用事件 + this.props.history.push('/home路径')进行路由跳转*/}
        {/* <Link to="/home/news">资讯</Link> */}
        {/* 配置路由 */}
        <Route path="/home/index" component={Index} />
        <Route path="/home/list" component={HouseList} />
        <Route path="/home/news" component={News} />
        <Route path="/home/profile" component={Profile} />
        {/* TabBar */}
        {/* <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}> */}
        <TabBar
          tintColor="#21b97a"
          barTintColor="white"
          // hidden={this.state.hidden}
          noRenderContent={true}
        >
          <TabBar.Item
            title="首页"
            key="Life"
            icon={
              <i className="iconfont icon-ind" />
            }
            selectedIcon={
              <i className="iconfont icon-ind" />
            }
            selected={this.state.selectedTab === '/home/index'}
            onPress={() => {
              this.setState({
                selectedTab: '/home/index',
              });
              // 路由切换
              this.props.history.push('/home/index')
            }}
            data-seed="logId"
          >
          </TabBar.Item>
          <TabBar.Item
            icon={
              <i className="iconfont icon-findHouse" />
            }
            selectedIcon={
              <i className="iconfont icon-findHouse" />
            }
            title="找房"
            key="Koubei"
            selected={this.state.selectedTab === '/home/list'}
            onPress={() => {
              this.setState({
                selectedTab: '/home/list',
              });
              // 路由切换
              this.props.history.push('/home/list')
            }}
            data-seed="logId1"
          >
          </TabBar.Item>
          <TabBar.Item
            icon={
              <i className="iconfont icon-infom" />
            }
            selectedIcon={
              <i className="iconfont icon-infom" />
            }
            title="资讯"
            key="Friend"
            selected={this.state.selectedTab === '/home/news'}
            onPress={() => {
              this.setState({
                selectedTab: '/home/news',
              });
              // 路由切换
              this.props.history.push('/home/news')
            }}
          >
          </TabBar.Item>
          <TabBar.Item
            icon={
              <i className="iconfont icon-my" />
            }
            selectedIcon={
              <i className="iconfont icon-my" />
            }
            title="我的"
            key="my"
            selected={this.state.selectedTab === '/home/profile'}
            onPress={() => {
              this.setState({
                selectedTab: '/home/profile',
              });
              // 路由切换
              this.props.history.push('/home/profile')
            }}
          >
          </TabBar.Item>
        </TabBar>
      </div>
      // </Router>
    )
  }
}

在这里插入图片描述
里面设置了通过切换图标改变浏览器url地址，也通过切换浏览器url地址高亮当前对应的TabBar子页

2.优化:代码整合

import React from 'react'
import { TabBar } from 'antd-mobile';
import {Route} from 'react-router-dom'
import Index from '../../pages/Index' // 引入子组件，下面生成嵌套路由
import HouseList from '../../pages/HouseList' // 引入子组件，下面生成嵌套路由
import News from '../../pages/News' // 引入子组件，下面生成嵌套路由
import Profile from '../../pages/Profile' // 引入子组件，下面生成嵌套路由
// 导入自己组件内部的样式文件
import './index.css'
// TabBar 数据
const tabItems = [
  {
    title: '首页',
    icon: 'icon-ind',
    path: '/home/index'
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list'
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  },
  {
    title: '首页',
    icon: 'icon-my',
    path: '/home/profile'
  }
]
export default class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname, // 默认选中哪个tabbar
    // hidden: false, // 用于控制tabar显示与隐藏的... 这里不需要隐藏，去掉
    // fullScreen: false, // 是否是全屏，tabbar在底部...此项目不需要动态控制TarbBar的位置，所以不要
  };
  // 渲染TabBar.Item
  renderTabBarItem() {
    return tabItems.map(item => {
      return (
        <TabBar.Item
          title={item.title}
          key={item.title}
          icon={
            <i className={`iconfont ${item.icon}`} />
          }
          selectedIcon={
            <i className={`iconfont ${item.icon}`} />
          }
          selected={this.state.selectedTab === item.path}
          onPress={() => {
            this.setState({
              selectedTab: item.path,
            });
            // 路由切换
            this.props.history.push(item.path)
          }}
          data-seed="logId"
        ></TabBar.Item>
      )
    })
  }
  render () {
    return (
      // 嵌套路由中不能用<Router></Router>包裹，否则路由将跳转不了
      // <Router>
      <div className="home">
        {/* 设置导航菜单 因为此处tabbar没有link功能，所以利用事件 + this.props.history.push('/home路径')进行路由跳转*/}
        {/* <Link to="/home/news">资讯</Link> */}
        {/* 配置路由 */}
        <Route path="/home/index" component={Index} />
        <Route path="/home/list" component={HouseList} />
        <Route path="/home/news" component={News} />
        <Route path="/home/profile" component={Profile} />
        {/* TabBar */}
        {/* <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}> */}
        <TabBar
          tintColor="#21b97a"
          barTintColor="white"
          // hidden={this.state.hidden}
          noRenderContent={true}
        >
          {this.renderTabBarItem()}
        </TabBar>
      </div>
      // </Router>
    )
  }
}

3.首页路由的设置

在这里插入图片描述

// TabBar 数据
const tabItems = [
  {
    title: '首页',
    icon: 'icon-ind',
    // path: '/home/index' // 去掉/index
    path: '/home'
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list'
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  },
  {
    title: '首页',
    icon: 'icon-my',
    path: '/home/profile'
  }
]

去掉首页中的/index

3-2在路由中添加一条默认路由，当浏览器url的pathname为/时也跳转到首页
其中<Route exact path="/" render={ () => } /> render属性：是一个函数prop,用于指定要渲染的内容
Redirect组件用于实现【路由重定向】，to属性指定要跳转到的路由地址

<Route exact path="/" render={ () => <Redirect to="/home"/> } />
<Route path="/home" component={Home}></Route>
<Route path="/citylist" component={CityList}></Route>

完整代码，可忽略
<Route exact path="/" render={ () => } />是加到父组件路由同级的
Redirect 要从路由里面引用 import { BrowserRouter as Router, Route, Redirect } from ‘react-router-dom’

App.js文件

import React from 'react';
// 导入要使用的组件
// import { Button } from 'antd-mobile'
// 引入路由
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
// 设置两个组件的路由，要先导入组件(页面)
import Home from './pages/Home' // /index可省略
import CityList from './pages/CityList'
function App() {
  return (
    <Router>
      <div className="App">
        {/* <Button>登录</Button> */}
        {/* 配置导航菜单 ，项目中暂时不要，因为直接展示首页，而不是需要点击才跳转到首页*/}
        {/* <Link to="/home">首页</Link>
        <Link to="/citylist">城市选择</Link> */}
        {/* 配置路由 */}
        <Route exact path="/" render={ () => <Redirect to="/home"/> } />
        <Route path="/home" component={Home}></Route>
        <Route path="/citylist" component={CityList}></Route>
      </div>
    </Router>
  );
}

export default App;

Home组件：嵌套路由

import React from 'react'
import { TabBar } from 'antd-mobile';
import {Route} from 'react-router-dom'
import Index from '../../pages/Index' // 引入子组件，下面生成嵌套路由
import HouseList from '../../pages/HouseList' // 引入子组件，下面生成嵌套路由
import News from '../../pages/News' // 引入子组件，下面生成嵌套路由
import Profile from '../../pages/Profile' // 引入子组件，下面生成嵌套路由
// 导入自己组件内部的样式文件
import './index.css'
import { Redirect } from 'react-router-dom/cjs/react-router-dom.min';
// TabBar 数据
const tabItems = [
  {
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list'
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  },
  {
    title: '首页',
    icon: 'icon-my',
    path: '/home/profile'
  }
]
export default class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname, // 默认选中哪个tabbar
    // hidden: false, // 用于控制tabar显示与隐藏的... 这里不需要隐藏，去掉
    // fullScreen: false, // 是否是全屏，tabbar在底部...此项目不需要动态控制TarbBar的位置，所以不要
  };
  // 渲染TabBar.Item
  renderTabBarItem() {
    return tabItems.map(item => {
      return (
        <TabBar.Item
          title={item.title}
          key={item.title}
          icon={
            <i className={`iconfont ${item.icon}`} />
          }
          selectedIcon={
            <i className={`iconfont ${item.icon}`} />
          }
          selected={this.state.selectedTab === item.path}
          onPress={() => {
            this.setState({
              selectedTab: item.path,
            });
            // 路由切换
            this.props.history.push(item.path)
          }}
          data-seed="logId"
        ></TabBar.Item>
      )
    })
  }
  render () {
    return (
      // 嵌套路由中不能用<Router></Router>包裹，否则路由将跳转不了
      // <Router>
      <div className="home">
        {/* 设置导航菜单 因为此处tabbar没有link功能，所以利用事件 + this.props.history.push('/home路径')进行路由跳转*/}
        {/* <Link to="/home/news">资讯</Link> */}
        {/* 配置路由 */}
        <Route exact path="/home" component={Index} />
        <Route path="/home/list" component={HouseList} />
        <Route path="/home/news" component={News} />
        <Route path="/home/profile" component={Profile} />
        {/* TabBar */}
        {/* <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}> */}
        <TabBar
          tintColor="#21b97a"
          barTintColor="white"
          // hidden={this.state.hidden}
          noRenderContent={true}
        >
          {this.renderTabBarItem()}
        </TabBar>
      </div>
      // </Router>
    )
  }
}
常威在打来福~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
react-tabbar
06-27
信息 包裹 React标签栏 描述 TabBar 组件 浏览器版本 >= IE6* 用法 默认标签页 可选的 细绳 必须是props.tabs的键 标签 必需的 对象，其中键是唯一的选项卡名称，值是选项卡描述符 选项卡描述符属性 标签 可选，如果提供，将添加标签元素 可以是带有文本的字符串或可渲染节点 图标 可选，如果提供，将添加一个图标元素 可以是带有类名的字符串或可渲染节点 看法 必需的 必须是可渲染的 var App = React . createClass ( { displayName : 'demo' , render : function ( ) { return TabBar ( { defaultTab : 'favorites' , tabs : { friends : { label :
react-native-tabbar-android
11-30
`react-navigation`提供了一系列导航解决方案，如StackNavigator、DrawerNavigator和TabNavigator，这些都可以与自定义的TabBar组件结合使用。 在实际开发中，`AwesomeProject`可能是一个示例项目或者模板项目，它...
react-native + teaset 实现 Tabbar
weixin_34090643的博客
08-24 371
1.代码 src/pages/MainPage/index.js /** * 主页面 */ import React, {Component} from 'react'; import { BackHandler, // 物理返回键 View, ToastAndroid } from 'react-native'; /** * @inject 注入需要的store * @ob...
react 自定义 TabBar 组件
weixin_34162695的博客
07-09 1285
1.创建 组件 src/components/TabBar/index.js /** * TabBar 组件 */ import React ,{ PureComponent } from 'react'; import classNames from 'classnames'; import { Link } from 'react-router-dom'; import {menuDat...
React Native商城项目实战02 - 主要框架部分(tabBar)
weixin_33843409的博客
08-06 54
1.安装插件，cd到项目根目录下执行: $ npm i react-native-tab-navigator --save     2.主框架文件Main.js /** * 主页面 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, ...
React-Native之TabBar
李白也的博客
01-05 766
TabBar底部导航用法。
react-native TabBar和Nav
04-10
在React Native开发中，`...TabNavigatorDemo这个压缩包文件很可能是包含了一个演示如何使用`react-navigation`创建TabBar和Nav的示例项目，通过学习和实践这个示例，你可以更好地理解和掌握React Native中的导航技术。
ReactNative的Tabbar组件
08-10
2. **基本用法**：在项目中引入Tabbar组件，然后在你的组件树中使用。每个Tab通常包含一个图标和标签文本，你可以通过props来设置它们。例如： ```jsx import { TabBarIOS } from 'react-native'; const ...
浅谈React 服务器端渲染的使用
12-11
React 提供了两个方法 renderToString 和 renderToStaticMarkup 用来将组件（Virtual DOM）输出成 HTML 字符串，这是 React 服务器端渲染的基础，它移除了服务器端对于浏览器环境的依赖，所以让服务器端渲染变成了一...
React——Ant Design Mobile的TabBar标签栏的简单使用（配合路由）
朝朝忆萍的博客
02-17 1824
官网上使用太繁琐，记录第一次使用时的代码，最简单的使用
React-Native项目中使用TabBar
大灰狼的小绵羊哥哥的博客
02-08 2889
之前的文章讲述了在RN项目中如何使用NavigationBar，如何调用原生模块，以及集成下拉刷新和上拉加载更多的功能，今天介绍一个第三方插件react-native-tab-navigator，讲述我是如何使用它在RN项目中使用TabBar 项目源码在这里 安装插件 npm install react-native-tab-navigator --save 使用
react-native创建tabbar
Warren_Zhang的博客
01-14 1980
在使用react-native的过程中，一般都会做一些tabbar。 在这里我比较常用的是 ： react-native-tab-navigator 这个第三方库 下面是效果图：  我贴下核心代码 const dataSource = [ {icon:require('./image/icon_home_normal.png'),selectedIcon:require('./ima...
react 底部tabBar组件封装（路由跳转）
JunRoyal
06-11 1356
route.js import Index from "./pages/Index"; import TrulyIndex from "./pages/TrulyIndex"; // exact精确匹配 使得路由的匹配更严格 为true时表示严格匹配，为false时为正常匹配 // requireAuth是否需要身份验证 const routes = [ { path: "/trulyIndex", exact: true, requireAuth: true, co
【搭建react-native项目框架】4.自定义TabBar中间按钮，实现播放时旋转动画
公西雒的技术站
05-28 2148
关于如何集成TabBar，请看上一节《【搭建react-native项目框架】3.集成第三方路由和tab页》 本节只讲解如何自定义TabBar的中间按钮，以及播放时旋转动画的实现。 关于动画与播放器的集成可以参考https://github.com/pheromone/react-native-videoDemo，但这个项目目前安卓存在bug，所以我只借鉴了动画部分。 还是先来看效果图 ...
html手机版tabbar,HTML5+DCloud--MUI--自定义tabbar图标
weixin_36218360的博客
07-09 180
官方链接：http://ask.dcloud.net.cn/article/128额，中英文字母打错！！！坑了一个多小时，默默的蹲在角落里/(ㄒoㄒ)/~~读者谨记！！！！！！！！！！！！1、进入 ：http://iconfont.cn/ 把你选好的图标放入购物车，之后点击“存储为项目”，输入项目名字，随意写，点击“存储”按钮后，会跳转到项目管理页面，2、点击“下载到本地”按钮，会将合并后的...
react实现Tab栏功能
Binglianxiaojiao的博客
12-23 681
实现思路：与vue的实现思路差不多，通过一个变量控制实现动态赋予类名，实现鼠标悬停添加样式以及内容的显示与隐藏。
react 解决tabbar封装组件后不能跳转页面
zczdc的博客
05-31 236
在子组件中使用import {withRouter} from “react-router-dom”; 导出的时候用export default withRouter(组件名) 然后重新运行代码就行了！！！！
在react中如何使用tab组件-小白系列 es6
大前端秘籍
02-20 3058
在react中如何使用tab组件-小白系列 es6 首先，在阅读本内容时，您应该建立起一个自己的react 项目。如果没有，可以走 传送门 ，去建立自己第一个react项目 第一步：加载第三方组件： 第二步：在index.android.js代码中添加如下代码（index.ios.js同理）： 就是这么简单。
react+typescript+antd-mobile(tabbar切换路由页面)
yuanqi3131的博客
08-27 1575
一、项目目录结构 二、App.tsx import React from "react"; import Routes from "./router/index"; function App() { return <Routes></Routes>; } export default App; 三、tabbar.tsx import React, { Component } from "react"; import { TabBar } from "antd-mobile";
react tabbar
最新发布
05-20
React TabBar 是一个 React 组件库，用于创建和管理选项卡式导航。它允许您轻松地在应用程序中添加选项卡，并提供一组可自定义的样式选项，以便根据您的应用程序的需求进行定制。 要使用 React TabBar，您需要先安装它。您可以使用 npm 通过运行以下命令来安装它： ``` npm install react-tabbar ``` 然后，您可以将其导入到您的项目中，并使用以下代码创建一个简单的 TabBar： ``` import React from 'react'; import TabBar from 'react-tabbar'; const tabs = [ { label: 'Home', icon: 'fa fa-home' }, { label: 'Profile', icon: 'fa fa-user' }, { label: 'Settings', icon: 'fa fa-cog' }, ]; function App() { return ( <TabBar tabs={tabs} /> ); } export default App; ``` 这将创建一个简单的 TabBar，其中包含三个选项卡：Home、Profile 和 Settings。每个选项卡都具有一个名称和一个图标，您可以使用自己的名称和图标替换它们。 除了上面的基本用法，React TabBar 还提供了许多其他选项和功能，例如自定义样式、事件处理程序和动态添加和删除选项卡。您可以在其文档中查找更多信息：https://github.com/pedronauck/react-tabbar。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值