html仿美团城市,React-Native 城市列表(仿美团)
项目需要写了一个城市列表的界面,供有需要的人参考一下
功能
点击右侧导航滚动到响应位置
导航跳转.gif
提供搜索功能
搜索功能.gif
说明
简单介绍
我使用的FlatList。一开始也尝试使用SectionList,但是在尝试执行跳转时发现位置不好计算,而且感觉SectionList的效率并不如FlatList 所以就使用FlatList 了。
ref = {'FlatList'}
style={{width:'100%'}}
data={this.state.sections}
contentContainerStyle = {styles.list}
showsVerticalScrollIndicator = {false}
renderItem = {this._renderItem}
initialNumToRender = {50}
getItemLayout={(data, index) =>this._getItemLayout(data,index)}
keyExtractor={(item,index)=>{
return(index.toString());
}}
>
这样看很简单吧。
数据的初始化是在componentDidMount 中完成的
数据来源是从其他人的代码中找到的json文件。
另外因为要加入,定位城市,常用城市,热门城市,所以变成了下面的样子。
componentDidMount(){
let cityContent2 = cityContent.data;
let letterList = []; // 侧边的导航数据
let cityArray = [];
let sections = []; // 最后将所以的信息放入其中
this.city2number = 0;
this.descNumber = 0;
this.titleCityArray = [0];
sections[sections.length] = {
name:'定位城市',
type:'desc',
};
sections[sections.length] = {
name:'珠海',
type:'location',
};
sections[sections.length] = {
name:'常用城市',
type:'desc',
};
//在定位城市和热门城市中设置 三个城市是一个组。
// 不然不好实现将他们放在一行中的操作。使用flexWrap 也能实现,但是会导致计算起来麻烦
//设置不同的type 在 FlatList 中的 renderItem 中用于区分,实现不同的样式
sections[sections.length] = {
name:'珠海,广州',
type:'city2',
};
sections[sections.length] = {
name:'热门城市',
type:'desc',
};
sections[sections.length] = {
name:'珠海,广州,杭州',
type:'city2',
};
sections[sections.length] = {
name:'北京,上海,西安',
type:'city2',
};
sections[sections.length] = {
name:'广州,杭州,北京',
type:'city2',
};
sections[sections.length] = {
name:'上海,西安',
type:'city2',
};
letterList.splice(0,0,'定位','常用','热门');
sections.forEach(element => {
if(element.type != 'desc'){
this.city2number++;
}else{
this.descNumber++;
}
});
let i = 0;
cityContent2.forEach(element => {
sections[sections.length] = {
name:element.title,
type:'letter',
};
element.city.forEach(element => {
if(element.city_child == element.city_parent){
sections[sections.length] = {
name:element.city_child,
type:'city',
}
i++;
}
});
this.titleCityArray[this.titleCityArray.length] = i;
letterList[letterList.length] = element.title;
});
// 查找时使用的数据
let key = 0;
cityArray = [];
cityContent2.forEach(element => {
element.city.forEach(element => {
if(element.city_child == element.city_parent){
cityArray[cityArray.length] = {
'name':element.city_child,
'name_en':element.city_child_en,
'key':key++,
}
}
});
});
this.setState({
sections:sections,
listData:letterList,
cityBase:cityArray,
searchArray:cityArray,
});
}
下面是_renderItem 根据不同的type 返回不同的样式。
_renderItem = (info) => {
var txt = ' ' + info.item.name;
switch(info.item.type){
case 'city':{
return(
style={{
height: CITYHEIGHT,
width:Utils.size.width-70,
textAlignVertical: 'center',
// backgroundColor: "#ffffff",
color: '#5C5C5C',
fontSize: 15,
borderBottomColor:'rgb(161,161,161)',
borderBottomWidth:1,
}}
>
{txt}
)
}
case 'letter':{
return(
style={{
height: TITLEHEIGHT,
width:Utils.size.width-70,
textAlignVertical: 'center',
//backgroundColor: "#0f0",
color: '#5C5C5C',
fontSize: 15,
borderBottomColor:'rgb(161,161,161)',
borderBottomWidth:1,
}}
>
{txt}
)
}
case 'desc':{
return(
style={{
height: DESCHEIGHT,
width:Utils.size.width-50,
textAlignVertical: 'center',
//backgroundColor: "#0f0",
color: '#5C5C5C',
fontSize: 15,
}}
>
{txt}
)
}
case 'city2':{
txt = txt.split(',');
return(
flexDirection:'row',
}}>
{
txt.map((element,index) => {
return
key={'info'+info.index+'index'+index}
style={{
textAlignVertical: 'center',
textAlign:'center',
width:94.5,
height:CITYHEIGHT2,
borderColor:'rgb(220,220,220)',
borderWidth:Utils.pixel,
fontSize: 15 ,
marginRight:14,
}}>
{element}
})
}
)
}
case 'location':{
return(
style={{
textAlignVertical: 'center',
textAlign:'center',
width:94.5,
height:CITYHEIGHT2,
borderColor:'rgb(220,220,220)',
borderWidth:Utils.pixel,
fontSize: 15 ,
marginRight:14,
//marginTop:4
}}>
{txt}
)
}
}
}
html仿美团城市,React-Native 城市列表(仿美团)相关推荐
- 这是可用于下一个项目的React Native工具列表
by Rajput Mehul 通过拉杰普特·梅胡尔(Rajput Mehul) 这是可用于下一个项目的React Native工具列表 (Here's a list of React Native ...
- android 仿ios tabs,React Native兼容iOS Android的TabBar
tabbar 最近着手开发的一个兼容iOS.Android的TabBar.还在不断开发中. 欢迎fork,欢迎star. :p 自己捣鼓了个E文的readme,没啥难度凑合可看. react-nati ...
- React Native制作仿美团APP总结
最近学习了一个网上的React Native项目,利用React Native制作一个类似于美团的App,项目属于对之前React Native常用组件的基本使用,但是仍有一些关键点值得记录.最后做成 ...
- react native 开发APP(六)网络请求,列表的使用
官网 https://reactnative.cn/ 项目下载地址:https://github.com/hebiao6446/DemoProject 陆续更新中... 在移动端开发的时候,我们基本上 ...
- React Native 二 常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
- React Native 开源项目汇总
最近闲来无事,学习了React Native开发Android APP,自我感觉RN APP的效果和Native APP比还是蛮不错,以下是找到的一些优秀源码,仅供学习参考... React Nati ...
- 混合开发架构|Android工程集成React Native、Flutter、ReactJs
混合开发架构|Android工程集成React Native.Flutter.ReactJs 架构设计说明 创建安卓原生工程 创建Flutter 集成嵌入原生工程 创建React Native 解决R ...
- React Native 学习资源精选仓库
<React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开源App.资源下载.以及相关新闻等,只求精不求全.因后面无法 Pu ...
- React Native 学习资源精选仓库(汇聚知识,分享精华)
React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...
- uniapp 仿美团饿了么城市列表+顶部搜索
直接上图片 效果图如下 <template><view class="introScroll"><view class="topView&q ...
最新文章
- WF4.0实战(一):文件审批流程
- JAVA企业级应用TOMCAT实战
- python print函数用法_Python3.2中Print函数用法实例详解
- 引入js失败的可能原因
- 只用来保存JQuery lightbox图片用的
- 关于Visual Basic 10.0
- Linux常用指令收集
- 初始化mysql的数据库失败_初始化mysql的数据库失败怎么办
- 《Reids 设计与实现》第十七章 发布与订阅
- POI2006 ZAB-Frogs
- Servlet 编写过滤器
- 浅谈Javascript -- 【嵌套函数及闭包】
- 锁表 for update
- ELAS_ROS算法在KITTI数据集上生成稠密点云
- BSN区块链服务网络介绍
- go-http server使用hijack接管连接的管理
- tolower c语言,tolower_字符串 | Strings_C_参考手册_非常教程
- 字节跳动构建Data Catalog数据目录系统的实践
- 怎么画学计算机的男孩形象,怎么一步一步教大班幼儿画自己的画像:小男孩简笔画(步骤图解)...
- 华硕FL5600l拆机
热门文章
- Android webview 69,android-9.0-pie-env(safe-area-inset-top)无法在Android Pie WebView 69上运行
- linux medea 软件安装,MedeA for Windows 安装
- python汽车数据分析_Python研究汽车传感器数据统计可视化分析
- transformer框架+self-attention技术+和图的关系
- Paddlehub创意赛---给人像增加背景
- 微信小程序逆地址解析
- 移动APP测试点归纳
- the number of input partition columns (1) doesn‘t equal to table‘s partition columns (2)
- 万字解析Activiti7流程框架
- DAMA认证|DAMA中国9月CDGA和CDGP认证考试通知