React项目实战三

菜单导航界面

利用antdmobile组件库中的Flex布局即可

image

涉及到的问题：

• 1，引入图片，使用import方式
• 2，轮播图不能自动轮播由于我们是动态获取的数据，可以加个状态判断，从而显示轮播图DOM组件否则展示空即可
• 3，<Flex.Item>组件单独抽离出renderNavs方法，这样更清晰
• 4，菜单导航跳转后相应的tabBar未高亮，原因是切换导航时并没有重新加载Home组件菜单高亮的方法，即没有重新执行state = {
  selectedTab: this.props.location.pathname,
  }，解决方案：在路由切换时，执行菜单高亮的方法，即在componentDidUpdate生命周期里判断preProps.location.pathname是否不等于this.props.location.pathname，是的话，调用this.setState({
  selectedTab: this.props.location.pathname,
  })方法即可。

在脚手架中使用sass

• 1, 安装sass: yarn add node-sass或者npm install node-sass --save
• 2, 创建以 .scss 或 .sass为后缀的文件
• 3, 在组件中导入sass文件

租房小组、最新资讯

租房小组业务需求：根据当前地理位置展示不同小组信息

image

这部分没什么功能点，代码也就不贴了，有需要直接找我就行了哦

搜索模块

image

H5中的地理位置API

根据当前地理位置，获取当前所在城市的房源信息

地理位置可以通过H5的 navigator.geolocation对象提供，通过 getCurrentPosition 方法获取:

navigator.geolocation.getCurrentPosition(i => {
  // i 对象就是当前位置信息
  // 常见的：longitude 经度、latitude 纬度
})

此时浏览器会弹出获取你位置的弹窗

image
注意：获取到的地理位置跟GPS、IP地址、WIFI、蓝牙的MAC地址、GSM/CDMS的ID有关
比如：手机优先使用GPS定位，笔记本等最准确的定位是WIFI
我们拿到了经纬度，这时需要配合百度地图等第三方去获取城市等信息

百度地图

H5 的地理位置 api 只能获取到经纬度信息，在实际开发中，会使用百度地图/高德地图来完成地理位置的相关功能

百度地图开发api文档, （web - JavaScript API）
使用前，需要申请百度账号和ak，获取到ak

image image

百度地图使用步骤：

• 1，public > index.html文件中引入百度地图API的js文件, 替换自己申请好的密钥(ak)

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">

• 2，在 index.css中设置全局样式

html, body, #root, .App {
  height: 100%;
}
html, body {
  padding: 0;
  margin: 0;
}

• 3, 创建 Map 组件，并创建一个div元素作为地图容器

render() {
  return(
    <div className="map">
      <div id="container"></div> 
    </div>
  )
}

.map, #container {
  height: 100%;
}

• 4,创建地图实例

componentDidMount() {
  const map = new window.BMapGL.Map('container')
}

• 5，设置中心点坐标

const point = new window.BMapGL.Point(116.404, 39.915)

• 6, 初始化地图，同时设置展示级别

map.centerAndZoom(point, 15)

获取顶部导航城市信息

通过IP定位获取到当前城市名称, 调用接口换取项目中的城市信息(有房源的城市的名称和id),最后将接口返回的城市信息展示在顶部导航栏中。

const curCity = new window.BMapGL.LocalCity()
curCity.get(async res => {
  const _res = await axios.get(`http://localhost:8080/area/info?name=${res.name}`)
  this.setState({
    currentCityName: _res.data.body.label
  })
})

image

下篇文章写城市选择模块，如果你学到了哪怕一点，可不可以给个关注哈哈哈，拜托拜托哦！