react-native城市列表组件

最新推荐文章于 2024-05-11 09:48:42 发布
最新推荐文章于 2024-05-11 09:48:42 发布
阅读量3.7k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiangzhihong8/article/details/75597524
本文介绍了如何在React Native中实现城市列表选择功能，包括当前城市、历史访问城市和热门城市的展示，并提供了字母索引的实现。通过自定义CityIndexListView和SearchBox组件，实现了界面交互。文章附有最终效果截图及源码下载链接。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

城市列表选择是很多app共有的功能，比如典型的美图app。那么对于React Native怎么实现呢？
这里写图片描述

要实现上面的效果，首先需要对界面的组成简单分析，界面的数据主要由当前城市，历史访问城市和热门城市组成，所以我们在提供Json数据的时候就需要将数据分为至少3部分。

const ALL_CITY_LIST = DATA_JSON.allCityList;
const HOT_CITY_LIST = DATA_JSON.hotCityList;
const LAST_VISIT_CITY_LIST = DATA_JSON.lastVisitCityList;

而要实现字母索引功能，我们需要自定义一个控件，实现和数据的绑定关系，自定义组件代码如下：
CityIndexListView.js


                

                
                
        

    

    
  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    



                



	

		

			

				
					
React-native实现联系人列表分组组件（支持拼音搜索）

				
			

			

				

					举世武双的博客
				

				

					05-08
					
					2153
					
				

			

		

		

			
				
React-native实现联系人列表分组组件（支持拼音搜索）



参考资料：

React Native使用SectionList打造城市选择列表，包含分组的跳转：https://blog.youkuaiyun.com/sinat_17775997/article/details/71424324?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-5&depth_1-utm_source=distribute.pc_relevant.no

			
		

	



                

            
              



	

		

			

				
					
react-native-s-baidumap -- 百度地图 React Native 模块，同时支持ios和android，react native 0.60.0+。

				
			

			

				

					Arno的博客
				

				

					02-06
					
					4470
					
				

			

		

		

			
				
react-native-s-baidumap
百度地图 React Native 模块，同时支持ios和android，react native 0.60.0+。
支持模块：

基础定位 ✅
基础地图 ✅
个性化地图 ✅
离线地图 ✅
绘制点标记 ✅
绘制线 ✅
绘制弧线和面 ✅
自定义Infowindow
点聚合
绘制overlay
POI检索 ✅
地点检索输入提示检索 ✅
地理编码 ✅
路线...

			
		

	



              


  
              

                


	

		

			

				
					
ReactNative可排序的列表组件

				
			

			

				

					08-10
				

			

		

		

			
				
React Native 可排序的列表组件

			
		

	





	

		

			

				
					
React Native—列表组件

				
			

			

				

					Chenghao_Hoo的博客
				

				

					09-01
					
					4728
					
				

			

		

		

			
				
移动应用往往受限于屏幕大小，而数据内容长度的不确定性，在很多地方都需要用列表组件来作为数据展示的容器。

对应于原生应用组件，它可能是iOS的TableView，也可能是Android的ListView，RecycleView。

这些组件都有一些共同的特点：

1、视图可滚动。

2、可复用视图模板。

3、视图高度随着数据内容长度的变化而弹性变化。

4、自带性能优化。

			
		

	



		

			
		



	

		

			

				
					
React Native 列表组件基础知识

				
			

			

				

					qq_33003143的博客
				

				

					08-13
					
					916
					
				

			

		

		

			
				
整理记录React Native的列表知识点

			
		

	





	

		

			

				
					
一个由ReactNative写的城市选择列表

				
			

			

				

					08-10
				

			

		

		

			
				
一个由React Native写的城市选择列表

			
		

	





	

		

			

				
					
推荐使用：FlashList - 高性能的React Native列表组件

					
最新发布

				
			

			

				

					gitblog_00055的博客
				

				

					05-11
					
					1466
					
				

			

		

		

			
				
推荐使用：FlashList - 高性能的React Native列表组件

在开发React Native应用时，高效的列表渲染是用户体验的关键因素之一。为此，我们向您推荐一个强大的开源项目——FlashList，它是一个快速且高性能的列表组件，旨在解决传统FlatList可能出现的空白单元格问题，并提供显著的性能提升。
1、项目介绍
FlashList 是由Shopify贡献的一个React ...

			
		

	





	

		

			

				
					
react-native-modal-picker

				
			

			

				

					05-12
				

			

		

		

			
				
这个组件尤其适用于那些需要用户从一系列选项中进行选择的场景，例如选择城市、日期、时间或者任何其他可选项列表。  React Native是Facebook推出的一款用于构建原生移动应用的框架，它允许开发者使用JavaScript和...

			
		

	





	

		

			

				
					
原生、混合、react-native应用对比分析

					
热门推荐

				
			

			

				

					iOS_Manguoge的博客
				

				

					03-12
					
					1万+
					
				

			

		

		

			
				
原生开发是系统自带的app开发方式，也是大部分人最熟悉app开发的技术，如android、ios、wp。
H5开发是Html5开发的app，本质上运行在手机浏览器中的页面，一般使用app做一个壳套用浏览器运行H5的页面，由于H5的特性也有很多app使用半原生半H5的hybird app 开发模式。react-native是用react 进行原生app开发的框架，让广大开发者使用js和react开发应用，提倡组件化开发

			
		

	





	

		

			

				
					
React Native_React Native组件

				
			

			

				

					十二指环的博客
				

				

					06-20
					
					425
					
				

			

		

		

			
				
Text组件

设置Text文字水平垂直居中显示

export default class Test4 extends Component{
    render(){
        return(
          <View style={styles.container}>
              <Text style={styles.textStyle} nu...

			
		

	





	

		

			

				
					
react-native-picker 实现省市区 时间日期组件-附件资源

				
			

			

				

					03-05
				

			

		

		

			
				
react-native-picker 实现省市区 时间日期组件-附件资源

			
		

	





	

		

			

				
					
react-city-select:react结合antd的Cascader组件实现pc端选择城市控件

				
			

			

				

					05-06
				

			

		

		

			
				
该项目是通过引导的。
可用脚本
在项目目录中，可以运行：
yarn start
 在开发模式下运行应用程序。 打开在浏览器中查看它。
 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。
yarn test
 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。
yarn build
 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！
 有关更多信息，请参见关于的部分。
yarn eject
 注意：这是单向操作。 eject ，您将无法返回！
 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。
 而是将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）直接复制

			
		

	





	

		

			

				
					
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

			
		

	





	

		

			

				
					
province-city-area-cn:react-native版省市区三级联动组件

				
			

			

				

					05-14
				

			

		

		

			
				
react-native-province-city-area
这是一个ReactNative版的省市区三级联动地址选择组件，在开发RN地址簿的时候用到地址选择，本来觉得这应该是一个很常用的功能，应该不用重复造轮子。但是几番搜索都没找到想要的，眼看找轮子的时间都快要超过新造轮子的时间了，于是果断放弃，自己写了一个，分享出来给需要的人。
使用说明
下载
npm i react-native-province-city-area
导入
import ProvinceCityArea from 'react-native-province-city-area';
在组件引用并传入参数
/**
 * 组件接受四个参数
 * color string，非必填，表示选择文本的颜色，默认浅蓝
 * callback 方法，必填，在组件内选择了地址后将选择的结果回调给父组件
 * initData 对象，

			
		

	





	

		

			

				
					
js城市选择控件

				
			

			

				

					11-16
				

			

		

		

			
				
用JS实现下拉框选择城市的效果，两个下拉框，分别选择两个不同的城市列表，城市列表可以动态设置，还支持按首字母分组

			
		

	





	

		

			

				
					
reactNative长列表

				
			

			

				

					weixin_53911951的博客
				

				

					07-27
					
					385
					
				

			

		

		

			
				
reactNative长列表

			
		

	





	

		

			

				
					
React Native之长列表：FlatList

				
			

			

				

					蓝枫
				

				

					01-02
					
					682
					
				

			

		

		

			
				

import React, {Component} from 'react';
import {
    AppRegistry,
    View,
    Text,
    StyleSheet,
    FlatList
} from 'react-native';

export default class HelloWorld extends Component {
    rend...

			
		

	





	

		

			

				
					
ReactNative实现城市选择列表

				
			

			

				

					weixin_34320159的博客
				

				

					06-18
					
					1057
					
				

			

		

		

			
				
引言
使用RN开发了一段时间,最近遇到了一个比较棘手的问题,就是用react写个城市选择列表,当然这个如果用Android原生来写,网上的例子数不胜数,随便就能找到,但是react却很少,也没有一个和我这个需求相匹配的,所以就只能自己动手撸一个出来咯.
效果
这个城市列表和其他的有点区别

1,有当前定位城市
2,有热门城市
3,每个子项是一个类似GridView的效果,而不是ListView
实...

			
		

	





	

		

			

				
					
React Native学习（10）长列表

				
			

			

				

					quanhaoH的专栏
				

				

					05-24
					
					237
					
				

			

		

		

			
				
React Native学习（10）长列表FlatListSectionList
FlatList
FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据。
如...

			
		

	





	

		

			

				
					
React Native城市列表实现技巧与效果展示

				
			

			

				

					
				

			

		

		

			
				
此外，为了实现流畅的用户体验，城市列表组件还可能需要集成触摸反馈效果，这可以通过添加适当的事件处理器来实现，例如使用onPress属性来定义点击事件的回调函数。当用户触摸列表项时，可以触发表单或弹出层，允许...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
xiangzhihong8

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值