当前位置: 首页 > 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"}
})
http://www.lryc.cn/news/146757.html

相关文章:

  • SpringCloud学习笔记(十)_SpringCloud监控
  • 测试理论与方法----测试流程的第二个环节:测试计划
  • postgresql-子查询
  • Linux 系统运维工具之 OpenLMI
  • 8天长假快来了,Python分析【去哪儿旅游攻略】数据,制作可视化图表
  • 【HSPCIE仿真】输入网表文件(5)基本仿真输出
  • uni-app中使用iconfont彩色图标
  • Hystrix: Dashboard流监控
  • iconfont 图标在vue里的使用
  • QT登陆注册界面练习
  • MySQL DATE_SUB的实践
  • OpenCV最常用的50个函数
  • Android AGP8.1.0组件化初探
  • 文件修改时间能改吗?怎么改?
  • 2023年下半年软考报名注意事项!
  • 【LeetCode每日一题】——274.H指数
  • 网络编程 day 4
  • 【Java架构-版本控制】-Git基础
  • ubuntu 挂载硬盘操作
  • 关于商品活动的H5页面技术总结
  • 前端:横向滚动条,拖动进行左右滚动(含隐藏滚动条)
  • Android JNI Bitmap指定颜色值替换
  • 测试理论与方法----测试流程的第四个步骤:执行测试,提出缺陷
  • Stable Diffusion 提示词入门指南
  • 基于鹰栖息算法优化的BP神经网络(预测应用) - 附代码
  • 想要搞懂接口测试和功能测试有什么区别,那就必须知道他们的基本原理
  • Spring: HiddenHttpMethodFilter的用法
  • Vue入门学习(一)
  • 软考:中级软件设计师:无线网,网络接入技术,ipv6
  • dart 学习 之 同步生成器(sync*)和 异步生成器(async*)