（一）react native 城市选择功能实现----FlatList

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量478 收藏
点赞数
文章标签： javascript react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37002224/article/details/106266655
版权

引言

如题，用Flatlist制作一个简单的城市选择功能

效果

1,当前定位城市
2,热门城市
3,搜索及取消
4.点击移动到具体位置
实现的效果图如下:
在这里插入图片描述

实现思路

1.准备城市文件
在这里插入图片描述

2.初始化数据

componentWillMount() {
		//初始化数据
		let cityContent2 = cityContent.data;
		let letterList = [];
		let cityArray = [];
		let sections = [];
		this.city2number = 0;
		this.descNumber = 0;
		this.titleCityArray = [0];
		//设置不同的type 在 FlatList 中的 renderItem 中用于区分，实现不同的样式
		// push定位城市
		sections.push({
			name: '定位城市',
			type: 'desc',
		}, {
			name: '北京',
			type: 'location',
		}
		)
		// push常用城市
		sections.push({
			name: '常用城市',
			type: 'desc',
		}, {
			name: '珠海,广州',
			type: 'city2',
		}
		)
		// push热门城市
		sections.push({
			name: '热门城市',
			type: 'desc',
		}, {
			name: '珠海,广州,杭州',
			type: 'city2',
		}
		)
		sections.push({
			name: '上海,西安,北京',
			type: 'city2',
		}
		)
		letterList.splice(0, 0, '定位', '常用', '热门');
		this.letterDescNumber = letterList.length;
		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,
		});
	}

3.全部代码

import React, { Component } from 'react';
import {
	StyleSheet,
	View,
	Text,
	TextInput,
	TouchableOpacity,
	FlatList,
	Image,
	SafeAreaView,
	ScrollView,
	RefreshControl,
	AsyncStorage
} from 'react-native';
import Utils from '../../components/Utils'
import { images } from '../../image/index'
import cityContent from '../../assets/city.json'
import { observer, inject } from "mobx-react"
const CITYHEIGHT = 30;
const TITLEHEIGHT = 40;
const DESCHEIGHT = 25;
const CITYHEIGHT2 = 30;
//mobx管理器
@inject('UpDate')
@observer
class CityChoose extends Component {
	constructor(props) {
		super(props);
		this.UpDate = this.props.UpDate
		this.state = {
			sections: [],
			cityArray: [],
			cityBase: [],
			showFlag: true,
			searchArray: [],
			searchText: '',
			chosedCity: '',
		}
		// 特殊栏目的数量 （定位，热门，常用）
		descNumber = 0;
		// 和上面对应的item 的数量。三个的总数
		city2number = 0;
		// 每个栏目前面城市的数量
		titleCityArray = [0],
			// 右侧导航中 特殊栏目的数量。
			this.letterDescNumber = 0;
	}
	static navigationOptions = {
		headerShown: false
	}
	//查找
	onChangeText = (text) => {
		this.setState({
			searchText: text
		})
		let Chinese = new RegExp('^[\u4e00-\u9fa5]+$');
		let English = new RegExp('^[a-zA-Z]+$');
		if (Chinese.test(text)) {
			let temp = [];
			this.state.cityBase.forEach(city => {
				if (city.name.indexOf(text) == 0) {
					// temp[temp.length] = city;
					temp.push(city)
				}
			});
			this.setState({
				searchArray: temp,
				showFlag: false,
			})
		} else if (English.test(text)) {
			text = text.toLowerCase();
			let temp = [];
			this.state.cityBase.forEach(city => {
				if (city.name_en.indexOf(text) == 0) {
					temp.push(city)
				}
			});
			this.setState({
				searchArray: temp,
				showFlag: false,
			})
		} else if (text.length == 0) {
			this.setState({
				searchArray: this.state.cityBase,
				showFlag: true
			});
		} else {
			this.setState({
				searchArray: [],
				showFlag: false
			});
		}
	}
	
	renderItem = (info) => {
		var txt = info.item.name;
		switch (info.item.type) {
			case 'city': {
				return (
					<TouchableOpacity
						onPress={() => {
						//保存点击的城市到mobx里
							this.UpDate.UpCityInfo(txt)
				this.props.navigation.navigate('Home')
						}}>
						<Text
							style={{
								height: scaleSizeH(30),
								width: Utils.size.width - 70,
								textAlignVertical: 'center',
								paddingLeft: scaleSizeH(5),
								color: '#5C5C5C',
								fontSize: scaleSizeH(15),
								borderBottomColor: 'rgb(161,161,161)',
								borderBottomWidth: scaleSizeH(1),
								// backgroundColor: "#0f0",
							}}
						>
							{txt}
						</Text>
					</TouchableOpacity>
				)
			}
			case 'letter': {
				return (
					<Text
						style={{
							height: scaleSizeH(40),
							width: '100%',
							textAlignVertical: 'center',
							//backgroundColor: "#0f0",
							paddingLeft: scaleSizeH(5),
							color: '#5C5C5C',
							fontSize: 15,
							borderBottomColor: 'rgb(161,161,161)',
							borderBottomWidth: 1,
						}}
					>
						{txt}
					</Text>
				)
			}
			case 'desc': {
				return (
					<Text
						style={{
							height: scaleSizeH(25),
							width: '100%',
							textAlignVertical: 'center',
							// backgroundColor: "#0f0",
							color: '#5C5C5C',
							fontSize: setSpText(15),
						}}
					>
						{txt}
					</Text>
				)
			}
			case 'city2': {
				txt = txt.split(',');
				return (
					<View style={{
						flexDirection: 'row',
					}}>
						{
							txt.map((element, index) => {
								return (
									<TouchableOpacity
										onPress={() => {
											
//保存点击的城市到mobx里											this.UpDate.UpCityInfo(element)										this.props.navigation.navigate('Home')
										
										}}>
										<Text
											key={'info' + info.index + 'index' + index}
											style={{
												width: scaleSizeH(94),
												height: scaleSizeH(30),
												fontSize: setSpText(15),
												lineHeight: scaleSizeH(30),
												textAlign: 'center',
												alignItems: 'center',
												backgroundColor: '#F4F4F4',
												borderWidth: Utils.pixel,
												borderColor: 'rgba(220,220,220,0.5)',
												marginRight: scaleSizeH(14),
												marginBottom: scaleSizeH(10)
											}}

										>
											{element}
										</Text>
									</TouchableOpacity>
								)
							})
						}
					</View>
				)
			}
			case 'location': {
				return (
					<Text
						style={{
							width: scaleSizeH(94),
							height: scaleSizeH(30),
							fontSize: setSpText(15),
							lineHeight: scaleSizeH(30),
							textAlign: 'center',
							alignItems: 'center',
							backgroundColor: '#F4F4F4',
							borderWidth: Utils.pixel,
							borderColor: 'rgba(220,220,220,0.5)',
							marginRight: scaleSizeH(14),
							marginBottom: scaleSizeH(10)
						}}
						onPress={() => {
							this.setState({
								chosedCity: txt
							})
						}}
					>
						{txt}
					</Text>
				)
			}
		}
	}
	_getItemLayout = (data, index) => {
		if (data[index].type == 'letter' || data[index].type == 'city') {
			let i;
			for (i = index; i > 0; i--) {
				if (data[i].type == 'letter') {
					break;
				}
			}
			let offset = this.state.listData.indexOf(data[i]['name']) - this.letterDescNumber;
			return {
				index,
				offset: CITYHEIGHT * (this.titleCityArray[offset] + index - i) + (offset) * (TITLEHEIGHT)
					+ this.city2number * CITYHEIGHT2 + this.descNumber * (DESCHEIGHT),
				length: i == index ? TITLEHEIGHT : CITYHEIGHT,
			}
		} else {
			let i;
			for (i = index; i > 0; i--) {
				if (data[i].type == 'desc') {
					break;
				}
			}
			let offset = this.state.listData.indexOf(data[i]['name'].slice(0, 2));
			return {
				index,
				offset: CITYHEIGHT2 * index + offset * (DESCHEIGHT - CITYHEIGHT2),
				length: i == index ? DESCHEIGHT : CITYHEIGHT2,
			}
		}

	}


//搜索之后的渲染
	_searchRenderItem = (info) => {
		return (
			<View style={{
				flexDirection: 'row', width: '100%',
				height: CITYHEIGHT, alignItems: 'center'
			}}>
				<TouchableOpacity
					onPress={() => {
						this.UpDate.UpCityInfo(info.item.name)
						this.props.navigation.navigate('Home')
					}}
					style={{
						width: '100%',
						height: CITYHEIGHT,
					}}
				>
					<Text
						style={{
							width: '100%',
							height: CITYHEIGHT,
							fontSize: setSpText(15)
						}}
					>{info.item.name}</Text>
				</TouchableOpacity>
			</View>
		)
	}

	_flatRenderItem = (info) => {
		return (
			<TouchableOpacity onPress={() => this._moveAction(info)} style={{ width: CITYHEIGHT, alignItems: 'center', height: 20 }}>
				<Text>{info.item}</Text>
			</TouchableOpacity>
		)
	}

	_moveAction = (info) => {
		let item = info.item.length == 1 ? info.item : info.item + '城市';
		for (let i = 0; i < this.state.sections.length; i++) {
			if (this.state.sections[i].name == item) {
				this.refs.FlatList.scrollToIndex({ animated: false, index: i });
				break;
			}
		}
	}


	componentWillMount() {
		//初始化数据
		let cityContent2 = cityContent.data;
		let letterList = [];
		let cityArray = [];
		let sections = [];
		this.city2number = 0;
		this.descNumber = 0;
		this.titleCityArray = [0];
		//设置不同的type 在 FlatList 中的 renderItem 中用于区分，实现不同的样式
		// push定位城市
		sections.push({
			name: '定位城市',
			type: 'desc',
		}, {
			name: '北京',
			type: 'location',
		}
		)
		// push常用城市
		sections.push({
			name: '常用城市',
			type: 'desc',
		}, {
			name: '珠海,广州',
			type: 'city2',
		}
		)
		// push热门城市
		sections.push({
			name: '热门城市',
			type: 'desc',
		}, {
			name: '珠海,广州,杭州',
			type: 'city2',
		}
		)
		sections.push({
			name: '上海,西安,北京',
			type: 'city2',
		}
		)
		letterList.splice(0, 0, '定位', '常用', '热门');
		this.letterDescNumber = letterList.length;
		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,
		});
	}
	componentDidMount() {

	}
	render() {
		return (
			<SafeAreaView style={{ flex: 1, backgroundColor: '#FFFFFF' }} >
				<View
					style={{
						flex: 1,
						alignItems: 'center',
						// backgroundColor: '#FFFFFF',
						// backgroundColor: 'pink',
						paddingLeft: scaleSizeH(15),
						paddingRight: scaleSizeH(15)
					}}
				>
					<View style={{
						width: '100%',
						height: scaleSizeH(90),
						flexDirection: 'row',
						alignItems: 'center',
						justifyContent: 'space-between',
						// backgroundColor: 'green'
					}}>
						<TouchableOpacity onPress={() => {
							// this.props.navigation.navigate('Home')
							this.props.navigation.goBack()
						}}
							style={{
								width: scaleSizeH(20),
								height: scaleSizeH(20),
							}}>
							<Image source={images.back_black} style={{
								width: scaleSizeH(10),
								height: scaleSizeH(20),
							}} />
						</TouchableOpacity>
						<TextInput
							style={{
								width: scaleSizeH(261),
								height: scaleSizeH(36),
								borderRadius: scaleSizeH(18),
								backgroundColor: '#F4F4F4',
								paddingLeft: scaleSizeH(15)
							}}
							value={this.state.searchText}
							// 	onChangeText={(text) => {
							// 		this.setState({ username: text })
							// 	}}
							onChangeText={(text) => this.onChangeText(text)}
							underlineColorAndroid='transparent'
							placeholder={'输入城市名字或首字母查询'}
						/>
						<TouchableOpacity
							onPress={() => {
								this.setState({
									searchText: '',
									searchArray: this.state.cityBase,
									showFlag: true
								})
							}}
						>
							<Text
								style={{
									fontSize: setSpText(16),
									color: '#333333',
								}}>cancel</Text>
						</TouchableOpacity>
					</View>
					{this.state.showFlag == true ? (
						<View
							style={{
								width: '100%'
							}}
						>
							<FlatList
								ref={'FlatList'}
								style={{
									width: '100%',
								}}
								data={this.state.sections}
								showsVerticalScrollIndicator={false}
								renderItem={this.renderItem}
								initialNumToRender={50}
								getItemLayout={(data, index) => this._getItemLayout(data, index)}
								keyExtractor={(item, index) => {
									return (index.toString());
								}}
							>
							</FlatList>
							<View
								style={{
									position: 'absolute',
									height: Utils.size.height - 93 + Utils.statusBarHeight,
									alignItems: 'center',
									justifyContent: 'center',
									right: 0,
								}}
							>
								<View style={{ height: 25 * 20 }}>
									<FlatList
										initialNumToRender={25}
										data={this.state.listData}
										renderItem={this._flatRenderItem}
										keyExtractor={(item, index) => { return item + index }}
									>
									</FlatList>
								</View>
							</View>
						</View>
					) : (
							<FlatList
								style={{
									width: '100%',

								}}
								data={this.state.searchArray}
								renderItem={this._searchRenderItem}
								keyExtractor={(item, index) => {
									return (index.toString());
								}}
							/>
						)}
				</View>

			</SafeAreaView>
		)
	}
}
export default CityChoose;

功能基本实现，待完善

wendy-jin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native城市选择与切换
xiangzhihong8的专栏
08-08 780
虽然React Native已经不在是当前热门的跨平台技术了，但是还是可以看到很多的公司和个人在用，Flutter有Flutter好，RN呢也有适合自己的地方，至于究竟哪个更好，我们不做过多的比较。 最近，我在升级之前的《React Native移动开发实战》一书，书中的项目有城市切换的功能，效果如下图所示。 可以看到，这个城市选择页面是很常规的，包含了当前定位城市和城市列表，右侧可以通过SlideBar进行快捷定位，除此之外，此组件还支持搜索功能。 首先，我们看一下城市列表，对于这一功能，我们可以使用S
RN-China-Region-Picker: 简易高效的React Native地区选择器
gitblog_00098的博客
04-01 553
RN-China-Region-Picker: 简易高效的React Native地区选择器 项目地址:https://gitcode.com/hufeng/rn-china-region-picker RN-China-Region-Picker 是一个专门为React Native开发者设计的组件，它提供了一个简洁且易于使用的中国地区选择器。这个库不仅包含了所有省份、城市和区县的数据，还提供了...
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
ReactNative实现城市选择列表
weixin_34320159的博客
06-18 953
引言 使用RN开发了一段时间,最近遇到了一个比较棘手的问题,就是用react写个城市选择列表,当然这个如果用Android原生来写,网上的例子数不胜数,随便就能找到,但是react却很少,也没有一个和我这个需求相匹配的,所以就只能自己动手撸一个出来咯. 效果 这个城市列表和其他的有点区别 1,有当前定位城市 2,有热门城市 3,每个子项是一个类似GridView的效果,而不是ListView 实...
React Native 省市区地址选择器（仿京东）
七月、代码君
10-24 6543
产品经理：“你明白吧，这里向右划可以出菜单，然后需要一个闪烁的动画，还有，我想这个tab可以拉下来，你懂吧？ 设计师：“别废话，把你要抄的产品给我看下。” … 接下来，我们仿一下别人家的地址挑选器 省市区数据格式的json文件项目基于react-native-scrollable-tab-view 组件编写，https://github.com/skv-headless/react-nativ
react-native-select：react native的简单下拉列表-iOS和Android
02-05
React本机选择React Native App的简单下拉菜单！...安装npm i react-native-selectme --save用法在您的Javascript文件中要求它。 还支持使用对象解构的组件。 Select Option OptionList 。 <OptionList>
react-native-get-random-values:React Native的getRandomValues的一个小实现
04-30
React Native的crypto.getRandomValues React Native的crypto.getRandomValues一个小实现。 这对于为依赖它的库进行polyfill很有用。安装npm install --save react-native-get-random-valuesnpx pod-install :light_...
react-native-draggable-flatlist:用于React Native的拖放式FlatList
05-12
请务必 使用npm或yarn安装此软件包与npm ： npm install --save react-native-draggable-flatlist 含yarn ： yarn add react-native-draggable-flatlist import DraggableFlatList from 'react-native-draggable-...
react-native-aes-gcm-crypto:适用于React Native的AES-GCM加密解密
05-09
React本机aes gcm密码适用于React Native的AES-GCM加密/解密要求iOS> = 13.0 Android> = 26安装npm install react-native-aes-gcm-crypto用法import AesGcmCrypto from 'react-native-aes-gcm-crypto' ;const key = ...
React-Native-FlatList-Slider:用FlatListReact本机图像滑块
05-04
React-Native-FlatList-Slider React Native中的自定义图像滑块组件安装npm i react-native-flatlist-slider进口 import {FlatListSlider} from 'react-native-flatlist-slider';用法 来自URI的图片 const images = ...
react-native-city-select:React本地城市选择:alien:
05-12
React本地城市选择 目录 安装 npm install react-native-city-select@latest --save 用法 import React , { Component } from 'react' ; import { StyleSheet , Text , View , TouchableOpacity } from 'react-native' ; import CitySelect from 'react-native-city-select' import CITY from './cityData.js' export default class App extends Component { constructor ( props ) { super ( props ) this . state = { isVis
一个由ReactNative写的城市选择列表
08-10
一个由React Native写的城市选择列表
React-native学习-35--城市选择组件react-native-picker
Green
03-05 827
yarn add react-native-picker import React, { Component } from 'react' import Picker from 'react-native-picker'; import { View } from 'react-native'; export default class MyDatePicker extends Component { constructor(props) { super(props) this.st
React Native学习五- FlatList
wgl_happy的专栏
05-03 1万+
高性能的简单列表组件，支持下面这些常用的功能： 完全跨平台。支持水平布局模式。行组件显示或隐藏时可配置回调事件。支持单独的头部组件。支持单独的尾部组件。支持自定义行间分隔线。支持下拉刷新。支持上拉加载。支持跳转到指定行（ScrollToIndex）。 如果需要分组/类/区（section），请使用。 一个最简单的例子： FlatList data={[{key: 'a'
React Native使用SectionList打造城市选择列表，包含分组的跳转
大灰狼的小绵羊哥哥的博客
05-08 1万+
1.背景   本文使用的RN(使用RN表示React Native)的版本为0.44版本，从官方文档上看SectionList是从0.43版本才有的，而要列表的吸顶悬浮功能，从0.44版本才开始有。具体可以查看React Native的官方文档。至于为何使用SectionList而不是使用ListView，可以自行百度SectionList（FlatList）的好处，就我了解主要是性能上的差
react-native-picker时间选择和城市选择
热门推荐
大灰狼的小绵羊哥哥的博客
03-21 1万+
react-native-picker https://github.com/beefe/react-native-picker
用React Native 写的城市选择组件
weixin_42592622的博客
09-30 3165
现如今城市列表选择组件在业务上需求很大，因此今天用React Naitve来实现一个城市列表的功能。话不多说，先来看看实现的效果： 根据效果来看很像是苹果手机的通讯录，那么接下来，我们就要开始写代码了。 页面编写 页面编写不用做过多的说明，关于下方城市选择的标签我们可以选择：SectionList,ListView,ScrollView,FlatList等。由于顶部的大学字母区域不用动态...
react-native三级城市联动选择
shizhihua11的博客
04-02 3024
省市数据链接https://download.csdn.net/my/uploads/3/1 以下是省市数据的截图 然后在react-native代码中实现省市的选择，实现如下： import areaData from '../../common/citydata'; export default class EditAddress extends Component<{}&...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 478
JavaScript青少年简明教程：函数及其相关知识（下）
携程实战：React-Native性能与应用优化策略
React Native是一种由Facebook基于React技术开发的开源框架，旨在将JavaScript编程语言应用于原生移动应用开发，实现了JavaScript代码在iOS和Android平台的共享。RN首次引入了JavaScript to Native的开发模式，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值