用React Native 写的城市选择组件

最新推荐文章于 2024-08-12 08:36:12 发布
最新推荐文章于 2024-08-12 08:36:12 发布
阅读量3.1k 收藏
点赞数 3
分类专栏： 前端 文章标签： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42592622/article/details/82907139
版权
本文介绍了如何使用React Native创建一个类似苹果通讯录的城市选择组件。选择ScrollView作为基础标签，利用JSON数据创建城市列表，并详细讲解了如何处理每个字母区域的高度、点击事件以及滑动监听，以实现实时更新大写字母和自动滚动到相应位置的功能。
摘要由CSDN通过智能技术生成 
	现如今城市列表选择组件在业务上需求很大，因此今天用React Naitve来实现一个城市列表的功能。话不多说，先来看看实现的效果：

在这里插入图片描述
根据效果来看很像是苹果手机的通讯录，那么接下来，我们就要开始写代码了。

  1. 页面编写
    页面编写不用做过多的说明，关于下方城市选择的标签我们可以选择：SectionList,ListView,ScrollView,FlatList等。由于顶部的大学字母区域不用动态的生成，因此我们这里大可不必使用SectionList。我们这里选择一个最基础的标签ScrollView来实现它。
    首先我们得有一个关于城市的JSON文件，从A到Z，这里用的是下到省市，可以参考。
    在这里插入图片描述在这里插入图片描述
    我们可以通过遍历来获取大写字母，也可以自行定义一个新的数组来存放大写字母。由于这里数据较多并且大写字母是固定的，因此我定义了新的数组
    在这里插入图片描述
    关于城市的列表，用map()直接遍历渲染就行了。这里需要注

最低0.47元/天 解锁文章
Jab Fury
关注
专栏目录
React Native城市选择与切换
xiangzhihong8的专栏
08-08 793
虽然React Native已经不在是当前热门的跨平台技术了，但是还是可以看到很多的公司和个人在用，Flutter有Flutter好，RN呢也有适合自己的地方，至于究竟哪个更好，我们不做过多的比较。 最近，我在升级之前的《React Native移动开发实战》一书，书中的项目有城市切换的功能，效果如下图所示。 可以看到，这个城市选择页面是很常规的，包含了当前定位城市和城市列表，右侧可以通过SlideBar进行快捷定位，除此之外，此组件还支持搜索功能。 首先，我们看一下城市列表，对于这一功能，我们可以使用S
一个由ReactNative写的城市选择列表
08-10
一个由React Native写的城市选择列表
React Native Picker (城市选择器)
weixin_30901729的博客
10-12 696
/** * Created by apple on 2016/10/12. *//**
 Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */"use strict"import React, {Component} from 'react'import { AppRegistry...
探索React Native开发的全能下拉选择器：React Native Dropdown Picker
最新发布
gitblog_01171的博客
08-12 396
探索React Native开发的全能下拉选择器：React Native Dropdown Picker react-native-dropdown-pickerA single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for re...
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 对象，
React-native学习-35--城市选择组件react-native-picker
Green
03-05 844
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省市区三级联动react-native-roll-picker 抽屉react-native-pan-drawer
大灰狼的小绵羊哥哥的博客
02-24 6995
https://github.com/yjy5264/react-native-roll-picker https://github.com/yjy5264/react-native-pan-drawer
react native带索引的城市列表组件的实例代码
08-29
在React Native中构建一个带有索引的城市列表组件可以极大地提升用户体验，特别是在处理大量城市数据时。这个组件允许用户快速地滚动并找到特定城市的首字母，从而迅速定位到所需的城市。以下是一个实现该功能的详细...
自己动手封装一个React Native多级联动
10-18
在React Native中，多级联动是一种常见的交互组件，通常用于实现比如地区选择、商品分类筛选等场景。本文将详细介绍如何自己动手封装一个React Native多级联动组件。 首先，我们需要了解多级联动的基本需求。在本例...
react中城市选择器组件
weixin_43709908的博客
07-04 1420
在react项目当中使用城市选择器， import React from 'react' import './index.less' import { Picker } from 'antd-mobile'; // 城市选择器 class CitySelect extends React.Component{ static defaultProps = { label: '', name: '', value: '', readO.
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
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
React Native 实现的图片选择器.zip
10-10
React Native 实现的图片选择器.zip,iOS/Android图像选择器，支持相机、视频、可配置压缩、多个图像和裁剪
react-native 实现城市列表
闫瑞锋的博客
10-19 349
https://www.jianshu.com/p/41ca302e1dc6
react native 实现城市选择组件
qq_35089721的博客
10-11 359
https://github.com/collinxz-coder/blog/issues/6?utm_source=tuicool&utm_medium=referral
React Native使用SectionList打造城市选择列表，包含分组的跳转
热门推荐
大灰狼的小绵羊哥哥的博客
05-08 1万+
1.背景   本文使用的RN(使用RN表示React Native)的版本为0.44版本，从官方文档上看SectionList是从0.43版本才有的，而要列表的吸顶悬浮功能，从0.44版本才开始有。具体可以查看React Native的官方文档。至于为何使用SectionList而不是使用ListView，可以自行百度SectionList（FlatList）的好处，就我了解主要是性能上的差
写一个地区选择组件备用(ReactNative)
weixin_34153893的博客
01-12 142
组件效果如下 IOS Android ...
React Native 省市区地址选择器（仿京东）
七月、代码君
10-24 6621
产品经理：“你明白吧，这里向右划可以出菜单，然后需要一个闪烁的动画，还有，我想这个tab可以拉下来，你懂吧？ 设计师：“别废话，把你要抄的产品给我看下。” … 接下来，我们仿一下别人家的地址挑选器 省市区数据格式的json文件项目基于react-native-scrollable-tab-view 组件编写，https://github.com/skv-headless/react-nativ
React Native开源时间选择器组件详析：react-native-datetime集成教程
该组件是针对React Native开发者的实用工具，它封装了一个可以在Android和iOS平台上使用的通用日期和时间选择器，它基于@remobile/react-native-datetime-picker库构建，旨在简化开发者在跨平台应用中处理日期和时间...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值