[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;" ...
随机推荐
- spring cloud应用
1.什么是注册中心 (1)就是首先有一个eureka server,服务的注册与发现的中心(2)你如果写好了一个服务,就可以将其注册到eureka server上去(3)然后别人的服务如果要调用你的服 ...
- Entity Framework 学习系列(2) - MySql Database First 开发方式
目录 写在前面 环境 下载MySQL连接工具 创建Databse First 1.创建控制台 2.创建数据库 3.安装 MySQL.Data 和MySQL.Data.Entity 3.在项目中添加数据 ...
- Debian 9 / Debian 10 / Ubuntu 18.04 / Ubuntu 18.10快速开启BBR加速 或 关闭BBR加速
如果使用的是Debian 9.Debian 10.Ubuntu 18.04.Ubuntu 18.10等内核高于4.9版本的系统,均可以使用此方法开启BBR加速,若你使用了Ubuntu 19.04的系统 ...
- 一张图看懂SharpSocket
SharpSocket提供了很多接口和类,他们被良好地组织在一起,通过下面的图片,可以瞬间看懂整个类库的脉络.通过调用各个接口的方法,完成socket通信的功能.
- OpenResty下载安装教程
原文链接:http://www.studyshare.cn/software/details/1174/0 一.OpenResty简介 OpenResty是一个全功能的 Web 应用服务器.它打包了标 ...
- 交互式脚本expect场景示例
expect语法示例 #spawn 新建一个进程,这个进程的交互由expect控制 #expect 等待接受进程返回的字符串,直到超时时间,根据规则决定下一步操作 #send 发送字符串给expect ...
- 给基于对话框的MFC程序添加状态栏并实时显示时间
转载自丝雪儿 1.首先在string table 里添加两个字串,ID分别为IDS_INDICATOR_MESSAGE and IDS_INDICATOR_TIME 2.在你的 dlg.h 类里面加个 ...
- 35、element ui tab切换加载echarts不显示或显示不全问题解决:
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card ...
- JavaScript 之 navigator 对象
navigator 对象可以查看用户所使用的浏览器类型和系统平台类型. 1.userAgent 通过 userAgent 可以判断用户浏览器的类型. Chrome 浏览器效果: 2.platform ...
- CSS 过渡动画
一.过渡 过渡(transition)是CSS3中具有颠覆性的特征之一,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 在CSS3 ...