react natve 使用 ScrollView 完成城市列表

最新推荐文章于 2022-11-03 08:00:36 发布
最新推荐文章于 2022-11-03 08:00:36 发布
阅读量278 收藏
点赞数
分类专栏： react native 文章标签： react native 城市列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39910762/article/details/88341968
版权

最近项目中需要用到城市列表这一功能，试过了 SectionList、FlatList、以及 ScrollView，对比之下发现 ScrollView 最简单，其余两者因为数据太多，不会一次性全部渲染出来

 

使用 ScrollView 的 scrollTo() 方法，即可实现；

 

滚动的距离 = 城市的高度和 + 字母的高度和 + header的高度；

滚动这是滚动 ScrollView 的距离

城市 city.json 文件

{ 
    "city":[	 
	 {
	     "title":"A",
	     "data":[
	 		"阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门"
	 	    ]
	 },
	 {
	     "title":"B",
	     "data":["北京","白银","保定","宝鸡","保山","包头","巴中","北海","蚌埠","本溪","毕节","滨州","百色","亳州"
	 	    ]
	 },
	 {
	     "title":"C",
	     "data":["重庆","成都","长沙","长春","沧州","常德","昌都","长治","常州","巢湖","潮州","承德", "郴州","赤峰","池州","崇左","楚雄","滁州","朝阳"
	 	    ]
	 },
	 {
	     "title":"D",
	     "data":["大连","东莞","大理","丹东","大庆","大同","大兴安岭","德宏","德阳","德州","定西","迪庆","东营"
	 	    ]
	 },
	 {
	     "title":"E",
	     "data":["鄂尔多斯","恩施","鄂州"]
	 },
	 {
	     "title":"F",
	     "data":["福州","防城港","佛山","抚顺","抚州","阜新","阜阳"
	 	    ]
	 		
	 },
	 {
	    "title":"G",
	     "data":["广州","桂林","贵阳","甘南","赣州","甘孜","广安","广元","贵港","果洛"]
			
	 },
	 {
	    "title":"H",
	     "data":["杭州","哈尔滨","合肥","海口","呼和浩特","海北","海东","海南","海西","邯郸","汉中","鹤壁","河池","鹤岗","黑河","衡水","衡阳","河源","贺州","红河","淮安","淮北","怀化","淮南","黄冈","黄南","黄山","黄石","惠州","葫芦岛","呼伦贝尔","湖州","菏泽"
		    ]
	 },
	 {
	    "title":"J",
	     "data":["济南","佳木斯","吉安","江门","焦作","嘉兴","嘉峪关","揭阳","吉林","金昌","晋城","景德镇","荆门","荆州","金华","济宁","晋中","锦州","九江",
            "酒泉"
                    ]
            
	 },
	 {
	    "title":"K",
	     "data":["昆明","开封"]
 
	 },
	 {
	    "title":"L",
	     "data":["兰州","拉萨","来宾","莱芜","廊坊","乐山","凉山","连云港","聊城","辽阳","辽源","丽江","临沧","临汾","临夏","临沂","林芝","丽水","六安","六盘水",
            "柳州","陇南","龙岩","娄底","漯河","洛阳","泸州","吕梁"
                    ]
 
	 },
	 {
 	    "title":"M",
	     "data":["马鞍山","茂名","眉山","梅州","绵阳","牡丹江"]
 			
	 },
	 {
	    "title":"N",
	     "data":["南京","南昌","南宁","宁波","南充","南平","南通","南阳","那曲","内江", "宁德","怒江"
                     ]
	 },
	 {
	    "title":"P",
	     "data":["盘锦","攀枝花","平顶山","平凉","萍乡","莆田","濮阳"]
 
	 },
	 {
	    "title":"Q",
	     "data":["青岛","黔东南","黔南","黔西南","庆阳","清远","秦皇岛","钦州","齐齐哈尔","泉州","曲靖","衢州"]
			
	 },
	 {
	    "title":"R",
	     "data":["日喀则","日照"]
	 },
	 {
	    "title":"S",
	     "data":["上海","深圳","苏州","沈阳","石家庄","三门峡","三明","三亚","商洛","商丘","上饶","山南","汕头","汕尾","韶关","绍兴","邵阳","十堰","朔州","四平","绥化","遂宁","随州","宿迁","宿州"
		    ]
            
	 },
	 {
	    "title":"T",
	     "data":["天津","太原","泰安","泰州","台州","唐山","天水","铁岭","铜川","通化","通辽","铜陵","铜仁","台湾"]
		    
	 },
	 {
		"title":"W",
		"data":["武汉","乌鲁木齐","无锡","威海","潍坊","文山","温州","乌海","芜湖","乌兰察布","武威","梧州"]
	 },
	 {
	    "title":"X",
	     "data":["厦门","西安","西宁","襄樊","湘潭","湘西","咸宁","咸阳","孝感","邢台","新乡","信阳","新余","忻州","西双版纳","宣城","许昌","徐州","香港","锡林郭勒","兴安"
		    ]
            
	 },
	 {
	    "title":"Y",
	     "data":["银川","雅安","延安","延边","盐城","阳江","阳泉","扬州","烟台","宜宾","宜昌","宜春","营口","益阳","永州","岳阳","榆林","运城","云浮","玉树","玉溪","玉林"
		    ]
			
	 },
	 {
	     "title":"Z",
	     "data":["杂多县","赞皇县","枣强县","枣阳市","枣庄","泽库县","增城市","曾都区","泽普县","泽州县","札达县","扎赉特旗","扎兰屯市","扎鲁特旗","扎囊县","张北县","张店区","章贡区","张家港","张家界","张家口","漳平市","漳浦县","章丘市","樟树市","张湾区","彰武县","漳县","张掖","漳州","长子县","湛河区","湛江","站前区","沾益县","诏安县","召陵区","昭平县","肇庆","昭通","赵县","昭阳区","招远市","肇源县","肇州县","柞水县","柘城县","浙江","镇安县","振安区","镇巴县","正安县","正定县","正定新区","正蓝旗","正宁县","蒸湘区","正镶白旗","正阳县","郑州","镇海区","镇江","浈江区","镇康县","镇赉县","镇平县","振兴区","镇雄县","镇原县","志丹县","治多县","芝罘区","枝江市","芷江侗族自治县","织金县","中方县","中江县","钟楼区","中牟县","中宁县","中山","中山区","钟山区","钟山县","中卫","钟祥市","中阳县","中原区","周村区","周口","周宁县","舟曲县","舟山","周至县","庄河市","诸城市","珠海","珠晖区","诸暨市","驻马店","准格尔旗","涿鹿县","卓尼","涿州市","卓资县","珠山区","竹山县","竹溪县","株洲","株洲县","淄博","子长县","淄川区","自贡","秭归县","紫金县","自流井区","资溪县","资兴市","资阳"
		    ]
	 }
    ]
}

字母

const letters = ['A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z']

 

App.js

import React, {Component} from 'react';
import { StyleSheet, ScrollView, Dimensions } from 'react-native';
import {
  Container,
  Input,
  ListItem,
  Icon,
  H3,
  View,
  Text,
} from 'native-base'
import HeaderNav from './HeaderNav'

import city from '../util/city'
const data = city.city;
const letters = ['A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z']

const { height } = Dimensions.get('window')
const LETTER_HEIGHT = 40; //字母高度
const ITEM_HEIGHT = 45; //每一个 item 高度

export default class HeaderSearchNav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentCity: '',
      historyCity: [],
      search: false,
      searchData: [],
    }
  }
  render() {
    return (
      <Container>
        <HeaderNav 
          leftIcon={'angle-left'}
          leftType={'FontAwesome'}
          title={'选择城市'}
          goBack={()=>this.props.navigation.goBack()}
        />
        <ListItem noIndent style={styles.search}>
          <Icon name={'search'} style={{fontSize:24,color:'#666'}}/>
          <Input placeholder={'请输入城市名或首字母'} 
            placeholderTextColor={'#999'}
            onChangeText={this._search}
            style={styles.input}
          />
        </ListItem>
        
        {
          this.state.search ? 
          <ScrollView showsVerticalScrollIndicator={false}>
            {
              this.state.searchData.map((val,i) => {
                return (
                  <ListItem key={i} style={{height:ITEM_HEIGHT}}>
                    <Text  style={styles.text}>{val}</Text>
                  </ListItem>
                )
              })
            }
          </ScrollView>
          :
          <ScrollView ref={'scroll'} showsVerticalScrollIndicator={false}>
            <ListItem noIndent style={styles.list}>
              <Text style={{fontSize:16,color:'#666'}}>当前城市: </Text>
              <Text style={{fontSize:14,color:'#999'}}>东莞</Text>
            </ListItem>
            {
              this.state.historyCity.length == 0 ? null 
              :
              <ListItem noIndent style={styles.list}>
                <Text style={{fontSize:16,color:'#666'}}>历史城市: </Text>
                {
                  this.state.historyCity.map((val,i)=>{
                    return (
                      <Text key={i} style={{fontSize:14,color:'#999',marginRight:10}}>{val}</Text>
                    )
                  })
                }
              </ListItem>
            }
            
            {
              data.map((val,i) => {
                return (
                  <View key={i}>
                    <ListItem noIndent style={styles.letter}>
                      <H3 >{val.title}</H3>
                    </ListItem>
                    {
                      val.data.map((val,i)=>{
                        return (
                          <ListItem key={i} style={{height:ITEM_HEIGHT}}>
                            <Text  style={styles.text} onPress={()=>this._selectedCity(val)}>{val}</Text>
                          </ListItem>
                        )
                      })
                    }
                  </View>
                )
              })
            }
          </ScrollView>
        }

        {
          this.state.search ? null
          :
          <View style={styles.position}>
            {
              letters.map((val,i)=>{
                return (
                  <Text key={i} style={styles.positionText} onPress={()=>this._scroll(i)}>{val}</Text>
                )
              })
            }
          </View>
        }
        
      </Container>
    );
  }
  // 搜索
  _search = (text) => {
    let searchData = this.state.searchData;
    if(text) {
      this.setState({search: true})
    }else {
      this.setState({search: false})
    }
    data.forEach((val) => {
      if(val.title == text.toUpperCase()) {
        searchData = val.data;
      }
    })
    this.setState({search:text,searchData});
    console.log(searchData)
  }
  // 点击右侧字母，左侧滑动到指定位置
  _scroll(i) {
    let newArr = [];
    data.forEach((val,index)=>{
      if(index < i) {
        val.data.forEach(item=>{
          newArr.push(item)
        })
      }
    })
    let letterHeight = LETTER_HEIGHT * i;
    let itemHeight = ITEM_HEIGHT * newArr.length;
    let topHeight = ITEM_HEIGHT * 2;
    if(this.state.historyCity.length == 0) {
      topHeight = ITEM_HEIGHT;
    }
    this.refs.scroll.scrollTo(
      {
        y: letterHeight + itemHeight + topHeight,
        animated: true,
      }
    )
  }
  // 选择城市
  _selectedCity(val) {
    let historyCity = this.state.historyCity;
    
    if(historyCity.indexOf(val) > -1) {
      return 
    }
    historyCity.unshift(val);
    if(historyCity.length > 3) {
      historyCity = historyCity.slice(0,3)
    }
    this.setState({historyCity})
  }
}

const styles = StyleSheet.create({
  search: {
    height: ITEM_HEIGHT,
    borderRadius: 10,
    marginTop: 5,
    marginHorizontal: 15,
    backgroundColor: '#eee',
    borderBottomColor: 'transparent',
  },
  input: {
    fontSize: 14,
    color: '#999'
  },
  list: {
    borderBottomColor: 'transparent',
    height: ITEM_HEIGHT,
  },
  letter: {
    height: LETTER_HEIGHT,
    backgroundColor: '#eee',
    borderBottomColor: 'transparent',
  },
  text: {
    paddingVertical: 5,
    color: '#666',
    fontSize: 14,
  },
  position: {
    position: 'absolute',
    top: height * 0.2,
    right: 0,
    width: 30,
    height,
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  positionText: {
    fontSize: 13,
    color: 'rgb(82,174,82)',
    paddingVertical: 3,
  }
});

最终效果：

 

 

 

 

 

 

 

 

 

 

 

qq_39910762
关注
专栏目录
React Native之ScrollView控件详解
xiangzhihong8的专栏
12-17 2万+
概述ScrollView在Android和ios原生开发中都比较常见，是一个 滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。 所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所
React-Native ScrollView自定义横向滑动进度条
JJochen的博客
01-12 2292
React-Native ScrollView自定义横向滑动进度条概要需求自定义滑动进度条确定参数计算参数滑动进度条的实现首页定制菜单确定参数渲染方式遍历输出效果图源码IndicatorScrollView.jsScroll.js 概要 本篇文章概述了通过React-Native实现一个允许自定义横向滑动进度条的ScrollView组件。 需求 开发一个首页摆放菜单入口的ScrollView可滑动组件（类似某淘首页上的菜单效果），允许自定义横向滑动进度条，且内部渲染的菜单内容支持自定义展示的行数和列数，在内
react实现城市列表
qq_40664426的博客
02-24 1692
文章目录前言一、效果图二、使用步骤1.引入库2.读入数据总结 前言 适用react实现的城市列表，具备吸顶和城市搜索定位等功能。 一、效果图 二、使用步骤 1.引入库 代码如下： import React from "react"; import { connect } from 'dva'; import VerticaLayout from '@/pages/tags/verticaLayout'; import { Row, Col } from 'antd' import { getLoc
ReactNative实现城市选择列表
weixin_34320159的博客
06-18 973
引言 使用RN开发了一段时间,最近遇到了一个比较棘手的问题,就是用react写个城市选择列表,当然这个如果用Android原生来写,网上的例子数不胜数,随便就能找到,但是react却很少,也没有一个和我这个需求相匹配的,所以就只能自己动手撸一个出来咯. 效果 这个城市列表和其他的有点区别 1,有当前定位城市 2,有热门城市 3,每个子项是一个类似GridView的效果,而不是ListView 实...
React-城市列表获取
qq_46591454的博客
11-12 378
https://github.com/thomaslwq/hkzf/blob/master/src/pages/CityList/index.js
react城市列表获取（1）
dreamimport的博客
03-05 552
import React from 'react' //导入的ant-moblie ui组件 import { NavBar, Icon } from 'antd-mobile'; import './index.scss' import axios from 'axios' //工具包utils的获取当前定位城市 import {getCurrentCity} from '../../utils...
react-native-sf-locations:定位与城市列表选择
05-18
React本机sf位置v 定位与选择位置视图 安装 NPM我React本机SF位置V npm install ele-react-native-location-保存 React本机链接 ＃安卓 android / setting.gradle 包括'：ele-react-native-location'project（'：ele-react-native-location'）。projectDir = new File（rootProject.projectDir，'../node_modules/ele-react-native-location/android' ） android / app / build.gradle 编译项目（“：ele-react-native-location”） MainApplication.java @Override prot
6.2React Native基础ScrollView和FlatList；
Tiger的专栏
02-13 4274
  目录 1.ScrollView 1.1ScrollView介绍 1.2ScrollView常用属性 1.3ScrollView常用方法 1.4. 获取原生事件 2.FlatList 2.1FlatList介绍 2.2FlatList常用属性 2.3FlatList常用方法 2.4FlatList示例 2.4.1示例 2.4.2.FlatList添加头部和尾部组件 2...
一个由ReactNative写的城市选择列表
08-10
一个由React Native写的城市选择列表
react-native-picker 实现省市区 时间日期组件-附件资源
03-05
react-native-picker 实现省市区 时间日期组件-附件资源
基于react省市区联动 map echarts dome
09-05
基于react省市区联动 map echarts dome。
a到z索引滑动城市选择带历史记录
07-18
支持a-z的索引滑动事件， 还有历史记录，热门城市等的城市选择
React-Native省市区三级联动react-native-roll-picker 抽屉react-native-pan-drawer
大灰狼的小绵羊哥哥的博客
02-24 6998
https://github.com/yjy5264/react-native-roll-picker https://github.com/yjy5264/react-native-pan-drawer
React项目实战之租房app项目（四）长列表性能优化&城市选择模块渲染列表
最新发布
小陈工的博客
11-03 853
在展示大型列表和表格数据的时候（城市列表、通讯录、微博等），会导致页面卡顿，滚动不流畅等性能问题这样就会导致移动设备耗电加快，影响移动设备的电池寿命产生性能问题的原因：大量DOM节点的重绘和重排懒渲染可视区域渲染react-virtualized是React组件，用来高效渲染大型列表和表格数据我们使用它来渲染城市列表数据到目前为止，我们完成了项目的4个部分的代码编写，分别是1、项目准备：部署本地接口，脚手架初始化项目，antd-mobile，路由等。
React Native 省市区地址选择器（仿京东）
七月、代码君
10-24 6622
产品经理：“你明白吧，这里向右划可以出菜单，然后需要一个闪烁的动画，还有，我想这个tab可以拉下来，你懂吧？ 设计师：“别废话，把你要抄的产品给我看下。” … 接下来，我们仿一下别人家的地址挑选器 省市区数据格式的json文件项目基于react-native-scrollable-tab-view 组件编写，https://github.com/skv-headless/react-nativ
react-native-picker 实现省市区 时间日期组件
weixin_30329623的博客
03-16 523
github示例以及详细参数：https://github.com/beefe/react-native-picker 先 安装 link npm install react-native-picker react-native link react-native-picker 然后就可以使用了，具体看文档 例如 import Picker from 'react-...
(二)ReactNatice命令总结
qq1377399077的专栏
01-04 730
RN
ReactNative 滑动字母选择城市 以及搜索功能
六道对穿肠的学习之旅
10-09 4991
先上效果图遇到的问题 右侧字母选择器 高度问题, 右侧字母选择器 如何使用手势检测panresponse 右侧字母选择器 计算高度如何判断是触摸到那个字母上的(思考 如果是==native应用是如何做的==…刚看过 native应用的城市列表也是通过计算每个字母的高度来检测的)动态创建的控件 右边滑动的原理: 通过onlayout计算每个字母高度 ,然后加入数组 , 手指触摸字母列表时 知道 触摸的
React Native：ScrollView与ListView组件用法详解
"React Native中的ScrollView组件和ListView组件是用于构建可滚动内容的两种关键组件。本文将深入探讨它们的功能、用法以及操作注意事项。" React Native提供了多种组件来帮助开发者构建用户界面，其中ScrollView和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值