React Native 下拉菜单容器实现
来源:互联网 发布:c语言如何编写头文件 编辑:程序博客网 时间:2024/05/19 03:45
背景
本周算是把一个 react native 版的商家管理工具(iOS 版花花内嵌商家后台)完成,所以现在花一点时间来把其中一些值得记录下的东西整理一下写出来。 根据 UI 设计,很多页面都采下图的展示方式:
可以看到,两个页面的结构相似:顶部都是若干个PickerIOS
组件的集合(红色框部分),然后下面是不同的组件(蓝色框组件)。例如左图有3个PickerIOS
而右图有4个PickerIOS
,并且分别代表不同的筛选条件。左图中的内容组件包括一个图表以及一个列表,而右图只有一个列表。所以考虑把公共部分提取出一个公共组件,该组件可以实现:
- 红色框内的
PickerIOS
数量以及内容可以定制。 - 蓝色框内的内容组件可以作为一个属性传递给该组件,用来展示信息。
- 切换筛选条件,能够向后端请求数据,并更新内容组件。
功能实现
顶部的Picker集合采用配置的方式实现,即单独创建一个配置文件模块DropdownViewConfig.js
,文件内容大致如下:
每个 key(如 platform 和 date 等)对应一种 Picker 类型;value object 中的 key 对应向后端请求数据时的params key,value 为每个 Picker 中的选项,pName 为向后端请求时 key 对应的 value 值,name 为 Picker 上展示的文字;ajaxRequired 用来指示该 Picker 选中状态发生变化时,是否需要向后端发送 ajax 请求,因为有的筛选是在已请求到的数据中进行,此时无需进行后端请求。
然后新建DropdownView.js
模块,即本文要介绍的自定义容器组件。首先设置组件的state
:
然后在挂载组件的时候,根据传来的dropMenus
属性,从配置模块中找到对应的 Picker 选项来初始化 Picker 集合。
然后还要写一些方法用来向后端请求数据的方法getData()
,以及设置请求参数的方法setParams
。 Picker 的值发生改变时,需要进行选项的状态处理;以及在关闭弹出的选择框后,需要执行筛选操作。
最后是render
函数。
最后在其他模块中引用上面定义的组件DropdownView
,首先选择 Picker 配置,然后创建内容组件,最后嵌入DropdownView
中。示例代码如下:
以上就是主要的实现代码。
注:转载注明出处并联系作者, 本文链接: https://nodefe.com/implementation-of-react-native-dropdown-container/
- React Native 下拉菜单容器实现
- React Native仿美团下拉菜单
- React Native仿美团下拉菜单
- React Native仿美团下拉菜单
- react-native中的下拉刷新实现
- React Native实现右上角的弹跳菜单
- 这是一个实现下拉刷新的react native组件 react-native-pullview
- react native实现上拉加载下拉刷新
- react native实现上拉加载下拉刷新
- React Native(下拉刷新,加载更多)超简单实现!
- react native listview 实现下拉刷新(RefreshControl)
- react-native-pull实现上拉加载下拉刷新
- React-Native|实现ListView下拉刷新加载更多
- react-native 二级菜单制作
- 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)
- React Native Button实现
- react-native实现popwindow
- React Native Splashscreen实现
- iframe高度自适应
- 如何将Ubuntu 15.04升级到Ubuntu 15.10
- 让https网站发送 referrer
- Swift deinit
- 《连载 | 物联网框架ServerSuperIO教程》- 15.数据持久化接口的使用。附:3.2发布与版本更新说明。
- React Native 下拉菜单容器实现
- 100道Java经典面试题及答案解析
- 机器学习常见算法分类汇总
- java开发转php遇到的问题-- 初始化成员变量报错问题
- 安装Dubbo管理Web端
- 动态加载APK原理分享
- Android Studiodebug高级调试
- 博客砖家及技术团队博客收藏
- lintcode——maximum average subarray