React项目实战之租房app项目(一)项目搭建底部导航栏

本文主要是介绍React项目实战之租房app项目(一)项目搭建底部导航栏,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

目录

  • 前言
  • 一、项目介绍
  • 二、项目环境搭建
    • 2.1 后端接口准备
    • 2.2 使用React脚手架初始化项目
    • 2.3 项目目录结构
    • 2.4 antd-mobile 组件库
      • 2.4.1 介绍
      • 2.4.2 快速上手
    • 2.5 配置项目路由
    • 2.6 外观和样式调整
  • 三、项目整体布局
    • 3.1 整体布局概述
    • 3.2 嵌套路由
      • 3.2.1 嵌套路由设计思路:
      • 3.2.2 嵌套路由使用步骤:
    • 3.3 实现底部导航栏TabBar
      • 3.3.1 拷贝TabBar组件结构
      • 3.3.2 修改TabBar组件样式
      • 3.3.3 TabBar不显示默认内容
      • 3.3.4 TabBar配合路由实现页面跳转
      • 3.3.5 创建TabBar组件菜单项对应的其他3个组件,并在Home组件中配置路由信息
      • 3.3.6 给菜单项添加selected属性,设置当前点击的菜单项高亮
      • 3.3.7 重构TabBar代码
  • 总结

一、项目介绍

项目简介:此次开发的项目是移动Web端的项目,核心业务是实现在线租房,功能类似链家,贝壳等APP
主要模块:在线找房(地图、条件搜索)、用户登录、房源发布等
效果展示:
在这里插入图片描述

核心技术栈:
1、React核心库:react、react-dom、react-router-dom
2、脚手架:create-react-app
3、数据请求:axios
4、UI组件库:antd-mobile
5、其他组件库:react-virtualized、formik+yup、react-spring等
6、百度地图API

二、项目环境搭建

2.1 后端接口准备

1、安装mysql数据库
2、 安装Navicat数据库管理软件
3、 打开Navicat,创建本地数据库,名称为hkzf
4、 右键点击数据库,选择运行SQL文件,找到本地SQL文件,将数据导入
5、 本项目的后端使用node.js编写,打开后端项目根路径,命令行运行命令 npm start,启动后端接口
6、 测试接口:接口地址 http://localhost:8080

2.2 使用React脚手架初始化项目

1、初始化项目:npx create-react-app hkzf-mobile
2、启动项目:在项目根目录执行命令:yarn start

2.3 项目目录结构

使用脚手架创建出来的项目目录如下图所示:
在这里插入图片描述

项目目录结构解析:
public/ 公共资源
index.html 首页(必须有)
manifest.json PWA应用的元数据
src/ 项目源码,写项目功能代码
index.js 项目入口文件(必须有)
App.js 项目的根组件
App.test.js App组件的测试文件
serviceWorker.js 用来实现PWA(可选)

我们需要对项目目录进行重构,重构后的目录如下:
src/ 项目源码,写项目功能代码
assets/ 资源(图片、字体图标等)
components/ 公共组件
pages/ 页面
utils/ 工具
App.js 根组件(配置路由信息)
index.css 全局样式
index.js 项目入口文件(渲染根组件、导入组件库等)

2.4 antd-mobile 组件库

2.4.1 介绍

antd-mobile 是 Ant Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。
官方文档地址: 快速上手 - Ant Design Mobile

特性:

  • UI 样式高度可配置,拓展性更强,轻松适应各类产品风格
  • 基于 React Native 的 iOS / Android / Web 多平台支持,组件丰富、能全面覆盖各类场景 (antd-mobile-rn)
  • 提供 “组件按需加载” / “Web 页面高清显示” / “SVG Icon” 等优化方案,一体式开发
  • 使用 TypeScript 开发,提供类型定义文件,支持类型及属性智能提示,方便业务开发
  • 全面兼容 react / preact

适用场景:

  • 适合于中大型产品应用
  • 适合于基于 react / preact / react-native 的多终端应用
  • 适合不同 UI 风格的高度定制需求的应用

2.4.2 快速上手

安装:npm install antd-mobile --save

按需导入组件和样式并渲染到页面:

// 导入组件
import { Button } from 'antd-mobile';
// 导入样式
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'ReactDOM.render(<Button>Start</Button>, mountNode);

2.5 配置项目路由

1、安装 yarn add react-router-dom
2、导入路由组件:Router / Route / Link
3、在pages文件夹中创建 Home/index.js 和 CityList/index.js 两个组件
4、使用Route组件配置首页和城市选择页面

在src/App.js中添加如下代码:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'// 导入首页和城市选择两个组件(页面)
import Home from './pages/Home'
import CityList from './pages/CityList'//配置路由
<Route path="/home" component={Home} />
<Route path="/citylist" component={CityList} />

2.6 外观和样式调整

1、修改页面标题,在index.html里面修改
2、基础样式调整,在index.css 中调整

在src/index.css中添加如下代码:

html,
body {height: 100%;font-family: 'Microsoft YaHei';color: #333;background-color: #fff;
}* {box-sizing: border-box;
}

三、项目整体布局

3.1 整体布局概述

我们项目的页面可分为两种,一种是有底部导航栏的,一种是没有的
底部导航栏效果图如下图所示:
在这里插入图片描述

有底部导航栏的页面需要使用嵌套路由,即路由内部包含路由

3.2 嵌套路由

3.2.1 嵌套路由设计思路:

1、用Home组件表示父路由的内容
2、用News组件表示子路由的内容

3.2.2 嵌套路由使用步骤:

1、在pages文件夹中创建News/index.js 组件
2、在Home组件中,添加一个Route作为子路由的出口
3、设置嵌套路由的path,格式以父路由path开头(父组件展示了,子组件才会展示)
4、修改pathname为 /home/news,News组件的内容就会展示在Home组件中了

在src/pages/home/index.js中添加如下代码:

// 2.1 导入路由
import { Route } from 'react-router-dom'// 2.2 导入News组件
import News from '../News'export default class Home extends React.Component {render() {return (<div style={{ backgroundColor: 'skyblue', padding: 10 }}>首页{/* 2.3 渲染子路由 */}<Route path="/home/news" component={News} /></div>)}
}

3.3 实现底部导航栏TabBar

3.3.1 拷贝TabBar组件结构

1、打开 antd-mobile 组件库中TabBar的组件文档
2、选择APP型选项卡菜单,点击 </>显示源码
3、拷贝核心代码到 Home 组件中(Home是父路由组件)
4、调整代码

3.3.2 修改TabBar组件样式

1、修改TabBar菜单项文字标题
TabBar的文字标题在TabBar.Item 的title属性中,所以我们修改对应四个title属性即可

2、修改TabBar菜单文字标题颜色
TabBar菜单选中的文字颜色在 TabBar的 tintColor 属性中设置
未选中文字颜色用默认的即可,删除 TabBar中的 unselectedTintColor 属性

3、修改TabBar菜单的图标
在 index.js里面引入字体图标的 css样式文件,这样我们只需要在组件中设置对应的类名即可,icon代表是默认图标,selectedIcon代表是选中的图标

4、修改TabBar菜单项的图标大小
在当前组件对应文件夹中创建index.css文件,修改一下字体图标的大小,设置为20px(注意,在home.js中记得导入当前的样式)

5、调整TabBar的位置,固定在最底部
通过调试工具我们发现,底部的TabBar的类名叫 am-tab-bar-bar,所以我们只需要设置一下这个类名的属性即可

6、去掉TabBar的徽章
找到TabBar.Item里面对应的 badge 属性,删除即可

3.3.3 TabBar不显示默认内容

我们发现,粘贴过来的TabBar代码中是有默认内容的,我们不想让默认内容显示,要如何设置呢?
给TabBar设置 noRenderContent 属性即可

3.3.4 TabBar配合路由实现页面跳转

给TabBar.Item 绑定点击事件,在点击事件逻辑里面利用编程式导航,进行路由的切换
利用 this.props.history,push() 来实现

3.3.5 创建TabBar组件菜单项对应的其他3个组件,并在Home组件中配置路由信息

创建对应的组件,然后在src/pages/home/index.js中进行导入:

{/* 配置路由信息 */}
<Route path="/home/index" component={Index}></Route>
<Route path="/home/list" component={HouseList}></Route>
<Route path="/home/news" component={News}></Route>
<Route path="/home/profile" component={Profile}></Route>

3.3.6 给菜单项添加selected属性,设置当前点击的菜单项高亮

通过 this.props.location.pathname 就能拿到当前的路由的path
在TabBarItem里面设置 selected的属性,判断是否等于当前的pathname
在state中记录当前的pathname

3.3.7 重构TabBar代码

在src/pages/home/index.js中添加如下代码:
声明一下数据源:

  state = {// 默认选中的TabBar菜单项selectedTab: this.props.location.pathname}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'
}]

封装一个函数来遍历渲染:

renderTabBarItem() {return tabItems.map(item => {return (<TabBar.Itemtitle={item.title}key={item.title}icon={<i className={`iconfont ${item.icon}`}></i>}selectedIcon={<i className={`iconfont ${item.icon}`}></i>}selected={this.state.selectedTab === item.path}onPress={() => {this.setState({selectedTab: item.path,});this.props.history.push(item.path)}}></TabBar.Item>)})
}

最后在render方法中调用即可:

render() {return (<div>{/* 配置路由信息 */}<Route path="/home/index" component={Index}></Route><Route path="/home/list" component={HouseList}></Route><Route path="/home/news" component={News}></Route><Route path="/home/profile" component={Profile}></Route>{/* 底部导航栏 */}<TabBartintColor="#21b97a"barTintColor="white"noRenderContent="true">{this.renderTabBarItem()}</TabBar></div>)
}

总结

这篇关于React项目实战之租房app项目(一)项目搭建底部导航栏的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/851612

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的