[RN] React Native 仿美团下拉筛选菜单控件
React Native 仿美团下拉筛选菜单控件
演示效果如下:

使用方法如下:
1、安装
npm install react-native-dropdownmenus --save react-native link react-native-dropdownmenus
2、使用
import React, {Component} from 'react';
import Dropdownmenu from 'react-native-dropdownmenus';
export default class App extends Component {
render() {
let conditionData = [
["地区", "广州", "深圳", "北京", "上海", "西安"],
["面积", "100平以内", "100-200平"],
["类型", "五星酒店", "四星酒店", "三星酒店", "二星酒店", "会展中心", "餐厅"],
];
return (
<Dropdownmenu
style={{flex: }}
bgColor={'white'}
tintColor={'#666666'}
activityTintColor={'green'}
// arrowImg={}
// checkImage={}
// optionTextStyle={{color: '#f00'}}
// titleStyle={{color: '#0f0'}}
// maxHeight={300}
handler={(selection, row) =>
console.log(selection,row)
}
data={conditionData}
// selectIndex={[0,2,0]}
/>
)
}
}
附:
笔者在link 过程中出现 Error: Cannot find module 'asap/raw' 错误!
解决方法参考: https://www.cnblogs.com/wukong1688/p/10911182.html
插件作者Github:
https://github.com/WheelerLee/react-native-dropdown-menu
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/10911222.html
转载请著名出处!谢谢~~
[RN] React Native 仿美团下拉筛选菜单控件的更多相关文章
- cocos2d-html5 简易 下拉表单 控件
刚才在CH5的群里问了问 有没有大侠写过 下拉表单控件啊! 没人鸟窝 ,DZ老师表示非常伤心啊 ,于是乎 自己写一个把 共享给大家. 效果图上一个 仅仅实现了一个最最主要的控件 非常eas ...
- 如何写一套下拉刷新的控件?《MJRefresh原理浅析》(附Demo下载地址)
相信大家有很多人在做项目的时候都在使用MJRefresh 控件来实现下拉刷新的功能: MJRefresh经过不断的重构与更新迭代,现在不管是功能上还是代码结构上都是相当不错的,都是很值我们去学习的. ...
- [RN] React Native 实现 FlatList上拉加载
FlatList可以利用官方组件 RefreshControl实现下拉刷新功能,但官方没有提供相应的上拉加载的组件,因此在RN中实现上拉加载比下拉刷新要复杂一点. 不过我们仍可以通过FlatList ...
- 【特效】手机端仿美团下拉菜单带遮罩层html+css+jquery
写了一个手机端的下拉菜单,类似美团,用相对单位rem写的. 效果截图: 代码很简单,原理有点类似嵌套的选项卡,其中的难点在于弹出下拉菜单后,出现黑色半透明遮罩层,而且下层列表页面禁止滚动了.关键就是给 ...
- Android自定义控件之仿美团下拉刷新
美团的下拉刷新分为三个状态: 第一个状态为下拉刷新状态(pull to refresh),在这个状态下是一个绿色的椭圆随着下拉的距离动态改变其大小. 第二个部分为放开刷新状态(release to r ...
- React Native环境搭建以及几个基础控件的使用
之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...
- React Native 教程:001 - 如何运行官方控件示例 App
原文发表于我的技术博客 本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置. 原文发表于我的技术博客 React ...
- React Native 之FlatList 下拉刷新和上拉加载更多
接上一篇代码: 只修改了FlatListDemo.js里面的代码 import React, {Fragment,Component} from 'react'; import { SafeAreaV ...
- EasyUI的下拉选择框控件方法被屏蔽处理方式
1.html标签如下 <div id="selectMap" style="top: 1px;left: 80px;position: absolute;" ...
随机推荐
- 『序列 莫队 dp预处理』
序列 Description 给定长度为n的序列:a1,a2,-,an,记为a[1:n]. 类似地,a[l:r](1≤l≤r≤N)是指序列:al,al+1,-,ar-1,ar.若1≤l≤s≤t≤r≤n ...
- FusionInsight大数据开发---Streaming应用开发
Streaming应用开发 掌握Streaming基本业务开发流 熟悉Streaming常用API接口使用 掌握Streaming业务设计基本原则 了解Streaming应用开发环境 了解CQL开发流 ...
- sql 语句中定义的变量不能和 sql关键字冲突
sql 语句中定义的变量不能和 sql关键字冲突 from bs_email_account account LEFT JOIN bs_group_info gp ON account.group_i ...
- 信安周报-第03周:DB系统表
信安之路 第03周 前言 这周自主研究的任务如下: 任务附录的解释: 文件读写在通过数据库注入漏洞获取webshell的时候很有用 系统库和表存放了很多关键信息,在利用注入漏洞获取更多信息和权限的过程 ...
- 浅谈maven setting.xml 设置的mirrorof标签作用。
https://blog.csdn.net/whbing1471/article/details/53983779 A 看这一段 背景:写好的java项目放置到linux服务器上进行编辑的时候,由于m ...
- mysql 中的日期格式。date_format( ) 转换格式
date_format( ) 转换格式 : 格式 描述 %a 缩写星期名 %b 缩写月名 %c 月,数值 %D 带有英文前缀的月中的天 %d 月的天,数值(00-31) %e 月的天,数值(0-31) ...
- jquery.validate.unobtrusive的使用
应用 一.引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src=&qu ...
- python --- Socketserver N部曲(1)
曲一 socketserver 是为了简化服务器端开发而产生的,是一个高级的标准库.(背景介绍完毕,开始干) 一些概念 来自源码的一张图片,简洁又FengSao +------------+ | Ba ...
- idea中从代码自动定位到左侧类结构位置
标题的意思表达的不是很清楚,下面是这个设置的方法: 图中红圈中就是设置的位置,把鼠标悬浮在上面,可以看到这个设置的名称是Autoscroll from source, 它的作用是,你在代码中点击一个方 ...
- OCR3:tesseract script
通过命令:tesseract -h 可查看 OCR操作脚本参数: 其中参数说明: –-oem:指定使用的算法,0:代表老的算法:1:代表LSTM算法:2:代表两者的结合:3:代表系统自己选择. –-p ...