当前位置: 首页 > news >正文

Rn实现省市区三级联动

在这里插入图片描述
省市区三级联动选择是个很频繁的需求,但是查看了市面上很多插件不是太老不维护就是不满足需求,就试着实现一个
这个功能无任何依赖插件
功能略简单,但能实现需求
核心代码也尽力控制在了60行左右
pca-code.json树型数据来源 Administrative-divisions-of-China
下面只贴了省市区选择的功能,全部代码可参考github area分支

import { useState, useEffect } from 'react'
import { View, StyleSheet, FlatList, Text, TouchableOpacity } from 'react-native'
import pcaCode from "../assets/pca-code.json"export default () => {const [selected, setSelected] = useState([]) //选择过的省市区const [options, setOptions] = useState([pcaCode]) //每一级的数据const [level, setLevel] = useState(0) // 当前展示第几级useEffect(() => {console.log(selected)}, [selected])const renderItem = ({ item }) => (<TouchableOpacity style={styles.option} onPress={() => activeItem(item)}><Text style={[styles.option_text, isActive(item.code) && styles.option_text_active]}>{item.name}</Text>{isActive(item.code) && <View style={styles.option_icon} />}</TouchableOpacity >)const isActive = (code) => selected.some(item => item.code == code)const activeItem = (item) => {setSelected((prev) => {const newSelected = [...prev]newSelected[level] = { code: item.code, name: item.name }return newSelected.slice(0, level + 1)})if (level < 2) {const nextLevel = level + 1setLevel(nextLevel)setOptions((prev) => {const nextOptions = [...prev]nextOptions[nextLevel] = item.childrenreturn nextOptions})}}const PanelTab = () => {const tabs = selected.length < 3 ? selected.concat({ name: "请选择" }) : selectedreturn (<View style={styles.tab}>{tabs.map((item, index) => {return (<View style={styles.tab_item} key={index}><TouchableOpacity onPress={() => setLevel(index)}><Text style={item.code ? styles.tab_item_text : styles.tab_item_text_gray}>{item.name}</Text></TouchableOpacity>{level == index && <View style={styles.tab_item_line} />}</View>)})}</View>)}return (<><PanelTab /><FlatList style={styles.flat} data={options[level]} renderItem={renderItem} keyExtractor={item => item.code} /></>)
}const styles = StyleSheet.create({flat: {height: 500,},option: {height: 40,paddingRight: 15,flexDirection: "row",alignItems: "center",justifyContent: "space-between",},option_text: {fontSize: 14},option_text_active: {color: "#409eff",fontWeight: 'bold',},option_icon: {width: 6,height: 10,borderBottomWidth: 2,borderBottomColor: "#409eff",borderRightWidth: 2,borderRightColor: "#409eff",transform: "rotate(45deg)"},tab: {flexDirection: "row",marginBottom: 10,},tab_item: {position: "relative",marginRight: 15,},tab_item_text: {fontSize: 14,fontWeight: 'bold',paddingBottom: 10,},tab_item_text_gray: {fontSize: 14,color: "gray",paddingBottom: 10,},tab_item_line: {position: "absolute",bottom: 0,left: 0,width: "100%",height: 3,borderRadius: 5,backgroundColor: "#409eff"}
})

相关文章:

Rn实现省市区三级联动

省市区三级联动选择是个很频繁的需求&#xff0c;但是查看了市面上很多插件不是太老不维护就是不满足需求&#xff0c;就试着实现一个 这个功能无任何依赖插件 功能略简单&#xff0c;但能实现需求 核心代码也尽力控制在了60行左右 pca-code.json树型数据来源 Administrative-d…...

SpringCloud学习笔记(十)_SpringCloud监控

今天我们来学习一下actuator这个组件&#xff0c;它不是SpringCloud之后才有的&#xff0c;而是SpringBoot的一个starter&#xff0c;Spring Boot Actuator。我们使用SpringCloud的时候需要使用这个组件对应用程序进行监控与管理 在SpringBoot2.0版本中&#xff0c;actuator可以…...

测试理论与方法----测试流程的第二个环节:测试计划

二、软件测试分类与测试计划 1、软件测试的分类(理解掌握) 根绝需求规格说明书&#xff0c;在设计阶段会产出的两个文档&#xff1a; 概要设计(HLD)&#xff1a;设计软件的结构&#xff0c;包含软件的组成&#xff0c;模块之间的层次关系&#xff0c;模块与模块之间的调用关系…...

postgresql-子查询

postgresql-子查询 简介派生表IN 操作符ALL 操作符ANY 操作符关联子查询横向子查询EXISTS 操作符 简介 子查询&#xff08;Subquery&#xff09;是指嵌套在其他 SELECT、INSERT、UPDATE 以及 DELETE 语句中的 查询语句。 子查询的作用与多表连接查询有点类似&#xff0c;也是为…...

Linux 系统运维工具之 OpenLMI

一、前要 OpenLMI&#xff08;全称 Open Linux Management Infrastructure&#xff09;即开放式的 Linux 管理基础架构。OpenLMI 是一个开源项目&#xff0c;用于管理 Linux 系统管理的通用基础架构。它建立在现有工具基础上&#xff0c;充当抽象层&#xff0c;以便向系统管理…...

8天长假快来了,Python分析【去哪儿旅游攻略】数据,制作可视化图表

目录 前言环境使用模块使用数据来源分析 代码实现导入模块请求数据解析保存 数据可视化导入模块、数据年份分布情况月份分布情况出行时间情况费用分布情况人员分布情况 前言 2023年的中秋节和国庆节即将来临&#xff0c;好消息是&#xff0c;它们将连休8天&#xff01;这个长假…...

【HSPCIE仿真】输入网表文件(5)基本仿真输出

仿真输出 1. 概述1.1 输出变量1.2 输出分析类型 2. 显示仿真结果2.1 .print语句基本语法示例 2.2 .probe 语句基本语法示例 2.3 子电路的输出2.4 打印控制选项.option probe.option post.option list.option ingold 2.5 .model_info打印模型参数 3. 仿真输出参数的选择3.1 直流…...

uni-app中使用iconfont彩色图标

uni-app中使用iconfont彩色图标 大家好&#xff0c;今天我们来学习一下uni-app中使用iconfont彩色图标&#xff0c;好好看&#xff0c;好好学&#xff0c;超详细的 第一步 首先&#xff0c;从iconfont官网&#xff08;iconfont-阿里巴巴矢量图标库&#xff09;选择自己需要的图…...

Hystrix: Dashboard流监控

接上两张服务熔断 开始搭建Dashboard流监控 pom依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocat…...

iconfont 图标在vue里的使用

刚好项目需要使用一个iconfont的图标&#xff0c;所以记录一下这个过程 1、iconfont-阿里巴巴矢量图标库 这个注册一个账号&#xff0c;以便后续使用下载代码时需要 2、寻找自己需要的图标 我主要是找两个图标 &#xff0c;一个加号&#xff0c;一个减号&#xff0c;分别加入到…...

QT登陆注册界面练习

一、界面展示 二、主要功能界面代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QMainWindow(parent), ui(new Ui::Widget) {ui->setupUi(this);this->setFixedSize(540,410); //设置固定尺寸th…...

MySQL DATE_SUB的实践

函数简介DATE_SUB()函数从DATE或DATETIME值中减去时间值(或间隔)。 下面说明了DATE_SUB()函数的语法&#xff1a; DATE_SUB(start_date,INTERVAL expr unit); DATE_SUB()函数接受两个参数&#xff1a; start_date是DATE或DATETIME的起始值。 expr是一个字符串&#xff0c;用于确…...

OpenCV最常用的50个函数

Python版&#xff1a;OpenCV提供了众多图像处理算子和函数&#xff0c;涵盖了各种任务和技术。以下是OpenCV中一些常用的50个算子和函数&#xff1a; cv2.imread&#xff1a;用于读取图像文件。cv2.imshow&#xff1a;用于显示图像。cv2.imwrite&#xff1a;用于保存图像。cv2…...

Android AGP8.1.0组件化初探

Android AGP8.1.0组件化初探 前言&#xff1a; 前面两篇完成了从AGP4.2到 AGP8.1.0的升级&#xff0c;本文是由于有哥们留言说在AGP8.0中使用ARouter组件化有问题&#xff0c;于是趁休息时间尝试了一下&#xff0c;写了几个demo&#xff0c;发现都没有问题&#xff0c;跳转和传…...

文件修改时间能改吗?怎么改?

文件修改时间能改吗&#xff1f;怎么改&#xff1f;修改时间是每个电脑文件具备的一个属性&#xff0c;它代表了这个电脑文件最后一次的修改时间&#xff0c;是电脑系统自动赋予文件的&#xff0c;相信大家都应该知道。我们右击鼠标某个文件&#xff0c;然后点击弹出菜单里面的…...

2023年下半年软考报名注意事项!

考试注意事项&#xff1a; 分数线&#xff1a;所有科目成绩全部在45分以上&#xff08;含45分&#xff09;通过考试&#xff1b;三科目的话&#xff0c;必须每科目都及格才算通过考试&#xff0c;只有一个不合格的&#xff0c;本次考试其他两个无效。 出成绩时间&#xff1a;预…...

【LeetCode每日一题】——274.H指数

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 排序 二【题目难度】 中等 三【题目编号】 274.H指数 四【题目描述】 给你一个整数数组 ci…...

网络编程 day 4

1、多进程并发服务器根据流程图重新编写 #include <myhead.h>#define ERR_MSG(msg) do{\fprintf(stderr, "__%d__:", __LINE__); \perror(msg);\ }while(0)#define PORT 8888 //端口号&#xff0c;范围1024~49151 #define IP "192.168.11…...

【Java架构-版本控制】-Git基础

本文摘要 Git作为版本控制工具&#xff0c;使用非常广泛&#xff0c;在此咱们由浅入深&#xff0c;分三篇文章&#xff08;Git基础、Git进阶、Gitlab搭那家&#xff09;来深入学习Git 文章目录 本文摘要1.Git仓库基本概念1.1 远程仓库(Remote)1.2 本地库(Repository) 2. Git仓库…...

ubuntu 挂载硬盘操作

1. 查看磁盘 sudo fdisk -l 2. 查看UUID sudo blkid记录下待挂载硬盘的UUID, 后面要使用 ps. 如果报错&#xff0c;检查是否已格式化硬盘 查看新硬盘的盘符&#xff0c;我的是/dev/sda&#xff0c;用下述命令格式化 sudo mkfs -t ext4 /dev/sda3. 创建挂载点 我的是在/mnt…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...