前言
一、项目介绍
项目简介：此次开发的项目是移动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.Item
title={
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>
{
/* 底部导航栏 */}
<TabBar
tintColor="#21b97a"
barTintColor="white"
noRenderContent="true"
>
{
this.renderTabBarItem()}
</TabBar>
</div>)
}