用React Native 写的城市选择组件

最新推荐文章于 2024-06-02 09:43:02 发布
最新推荐文章于 2024-06-02 09:43:02 发布
阅读量3.1k 收藏
点赞数 3
分类专栏： 前端 文章标签： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42592622/article/details/82907139
版权 
	现如今城市列表选择组件在业务上需求很大，因此今天用React Naitve来实现一个城市列表的功能。话不多说，先来看看实现的效果：

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

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

最低0.47元/天 解锁文章
Jab Fury
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
React-Native省市区三级联动react-native-roll-picker 抽屉react-native-pan-drawer
大灰狼的小绵羊哥哥的博客
02-24 6978
https://github.com/yjy5264/react-native-roll-picker https://github.com/yjy5264/react-native-pan-drawer
react-native 三级联动城市 react-native-picker
weixin_41815063的博客
07-12 652
第一步： 装依赖,把react-native-picker的依赖放在src/node_modules里面 在package.json里面引入"react-native-picker": "file:./src/node_modules/react-native-picker", 说明：src/node_modules是自己在src 里面创建的node_modules，跟项目自带的node_modules 不一样 import React from 'react'; import { Sty...
推荐使用：React Native Select Multiple —— 多选列表组件
最新发布
gitblog_00012的博客
06-02 316
推荐使用：React Native Select Multiple —— 多选列表组件 项目地址:https://gitcode.com/tableflip/react-native-select-multiple 在构建移动端应用时，我们常常会遇到需要让用户从多个选项中选择的场景，这正是react-native-select-multiple这个开源项目可以大展拳脚的地方。它是一个高度可定制的F...
React-Native ListView 实现带标题的列表
08-13
React-Native ListView 实现带标题的列表
React Native—列表组件
Chenghao_Hoo的博客
09-01 4532
移动应用往往受限于屏幕大小，而数据内容长度的不确定性，在很多地方都需要用列表组件来作为数据展示的容器。 对应于原生应用组件，它可能是iOS的TableView，也可能是Android的ListView，RecycleView。 这些组件都有一些共同的特点： 1、视图可滚动。 2、可复用视图模板。 3、视图高度随着数据内容长度的变化而弹性变化。 4、自带性能优化。
ReactNative开发城市列表页
weixin_33753003的博客
02-23 222
首先来看看效果图对比 ScrollView和SectionList 需求 页面包含当前定位，热门城市，全国的城市列表。其中全国城市列表页带字母分类，右侧带有字母索引 讲道理，要完成这个需求，我能想到的是城市列表如何实现？ScrollView、FlatList、SectionList。 当然经过思考后，首先想到的是用SectionList来完成，所以第一版出来的效果是SectionList组...
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' ;...
react native带索引的城市列表组件的实例代码
08-29
在React Native中构建一个带有索引的城市列表组件可以极大地提升用户体验，特别是在处理大量城市数据时。这个组件允许用户快速地滚动并找到特定城市的首字母，从而迅速定位到所需的城市。以下是一个实现该功能的详细...
一个由ReactNative写的城市选择列表
08-10
React Native城市选择列表是利用React Native框架开发的一个组件，它为移动应用提供了便捷的方式来实现用户交互，特别是涉及地理选择的情景。React Native是Facebook推出的一种跨平台的移动应用开发技术，它允许...
React Native实现地址挑选器功能
08-29
在本示例中，我们将讨论如何使用React Native创建一个类似的功能，仿照其他应用的地址选择器。 首先，我们需要导入必要的React Native库和组件。在这个例子中，我们使用了`Component`、`PropTypes`、`StyleSheet`、...
react-native-picker时间选择和城市选择
热门推荐
大灰狼的小绵羊哥哥的博客
03-21 1万+
react-native-picker https://github.com/beefe/react-native-picker
react-country-province:使用React的国家_地区选择器
05-13
React-Country-Province React-Country-Province是处理国家和省份选择的组件。 更改国家/地区，然后更新省选项。 国家和省份清单是从 参数： 国家/地区：React.PropTypes.bool， countryName：React.PropTypes.string， countryValue：React.PropTypes.string， countryLabel：React.PropTypes.string， countryMulti：React.PropTypes.bool， countryBringToTop：React.PropTypes.array， 省：React.PropTypes.bool， provinceName：React.PropTypes.string， provinceValue：React.Pro
react-native-country-picker-modal：:Antarctica:国家/地区选择器提供一种模式，允许用户从列表中选择国家。 在每个国家/地区名称旁边显示一个标志
02-05
React Native的国家/地区选择器。 的iOS 安卓 网页 演示版 :party_popper: :party_popper: 安装 $ yarn add react-native-country-picker-modal 基本用法 有关更完整的示例，请打开 import React , { useState } from 'react' import { View , Text , StyleSheet , PixelRatio , Switch } from 'react-native' import CountryPicker from 'react-native-country-picker-modal' import
城市选择器——三级联动
07-20
希望对大家有所帮助 城市选择器——三级联动
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 对象，
ReactNative实现城市选择列表
weixin_34320159的博客
06-18 952
引言 使用RN开发了一段时间,最近遇到了一个比较棘手的问题,就是用react写个城市选择列表,当然这个如果用Android原生来写,网上的例子数不胜数,随便就能找到,但是react却很少,也没有一个和我这个需求相匹配的,所以就只能自己动手撸一个出来咯. 效果 这个城市列表和其他的有点区别 1,有当前定位城市 2,有热门城市 3,每个子项是一个类似GridView的效果,而不是ListView 实...
react-native实现树结构选择组件
suwu150
06-18 6699
能够按照数据结构进行展开树状结构，通常用来进行展示具有明显层级关系的数据结构,展示的同时,能够进行指定默认值展开和默认选中值,能够进行单选和多选操作,进行通过传递props禁止选择等功能。
使用React实现选择城市三级联动组件
左岸
04-08 8090
以下代码是初期写的代码，后来对代码进行优化，解决了初期的bug。完整的选择城市三级联动组件可以参考我的github项目中的代码，这是后期调试成功上传上去的React选择城市三级联动组件 <SelectArea allAreaInfo={allAreaInfo} province={province} city={city} district={district} cancel={thi...
React Native 中项目的组件使用写法
06-07
在 React Native 中，我们可以使用基本的组件和自定义组件来构建应用程序界面。以下是使用基本组件和自定义组件的示例： 使用基本组件： ```jsx import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const App = () => { return ( <View style={styles.container}> <Text style={styles.text}>Hello, React Native!</Text> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 20, fontWeight: 'bold', }, }); export default App; ``` 使用自定义组件： ```jsx import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const MyComponent = ({ title, message }) => { return ( <View style={styles.container}> <Text style={styles.title}>{title}</Text> <Text style={styles.message}>{message}</Text> </View> ); }; const App = () => { return ( <View style={styles.container}> <MyComponent title="Welcome" message="This is a custom component in React Native." /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, title: { fontSize: 24, fontWeight: 'bold', }, message: { fontSize: 16, marginVertical: 10, }, }); export default App; ``` 在上面的示例中，我们定义了一个名为`MyComponent`的自定义组件，并将其作为子组件添加到`App`组件中。在`MyComponent`组件中，我们可以使用`props`来接收来自父组件的数据，并根据需要渲染内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值