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 仿美团下拉筛选菜单控件的更多相关文章

  1. cocos2d-html5 简易 下拉表单 控件

    刚才在CH5的群里问了问  有没有大侠写过 下拉表单控件啊!  没人鸟窝 ,DZ老师表示非常伤心啊  ,于是乎  自己写一个把 共享给大家. 效果图上一个  仅仅实现了一个最最主要的控件  非常eas ...

  2. 如何写一套下拉刷新的控件?《MJRefresh原理浅析》(附Demo下载地址)

    相信大家有很多人在做项目的时候都在使用MJRefresh 控件来实现下拉刷新的功能: MJRefresh经过不断的重构与更新迭代,现在不管是功能上还是代码结构上都是相当不错的,都是很值我们去学习的. ...

  3. [RN] React Native 实现 FlatList上拉加载

     FlatList可以利用官方组件 RefreshControl实现下拉刷新功能,但官方没有提供相应的上拉加载的组件,因此在RN中实现上拉加载比下拉刷新要复杂一点. 不过我们仍可以通过FlatList ...

  4. 【特效】手机端仿美团下拉菜单带遮罩层html+css+jquery

    写了一个手机端的下拉菜单,类似美团,用相对单位rem写的. 效果截图: 代码很简单,原理有点类似嵌套的选项卡,其中的难点在于弹出下拉菜单后,出现黑色半透明遮罩层,而且下层列表页面禁止滚动了.关键就是给 ...

  5. Android自定义控件之仿美团下拉刷新

    美团的下拉刷新分为三个状态: 第一个状态为下拉刷新状态(pull to refresh),在这个状态下是一个绿色的椭圆随着下拉的距离动态改变其大小. 第二个部分为放开刷新状态(release to r ...

  6. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  7. React Native 教程:001 - 如何运行官方控件示例 App

    原文发表于我的技术博客 本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置. 原文发表于我的技术博客 React ...

  8. React Native 之FlatList 下拉刷新和上拉加载更多

    接上一篇代码: 只修改了FlatListDemo.js里面的代码 import React, {Fragment,Component} from 'react'; import { SafeAreaV ...

  9. EasyUI的下拉选择框控件方法被屏蔽处理方式

    1.html标签如下 <div id="selectMap" style="top: 1px;left: 80px;position: absolute;" ...

随机推荐

  1. golang学习笔记--包导入及go 常用命令及参数

    包导入:包导入路劲即代码包在工作区的src目录下的相对路径. 同一个源码文件中导入的多个代码包的最后一个元素不能重复,否则引起编译错误,如果只导入不使用,同样会引起编译错误 若想导入最后一个元素名相同 ...

  2. 6、VUE指令

    1.指令的格式 1.1. 指令的概念 指令是指带有v-前缀的特殊属性,指令的职责是当其表达式的值改变时,相应的将某些行为应用到DOM上. 1.2. 指令必须是html的属性 指令只能以带前缀的html ...

  3. 使用docker部署titpetric/netdata

    netdata 是常用的Linux系统性能实时监控面板 官方docker netdata/netdata部署 docker run -d --name=netdata \ -p 19999:19999 ...

  4. mvc_第一章后入门_第一遍_控制器和视图

    在掌握了数据库访问方法之后,我们来看几个mvc的入门程序,借此熟悉mvc的常见工作方式. 一.创建项目,显示一个最简单的页面. 要点:1.为了突出重点,不使用模版:2.项目类型为mvc,便于获得vs添 ...

  5. Java基础篇(下)

    6.Java面向对象的三个特征与含义 三大特征是:继承.封装和多态. (1)继承的概念 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得 ...

  6. javascript实现网页倒计时效果

    一.HTML代码如下: <div class="timer" id="timer"> <span style="color: bla ...

  7. Jvm调优积累的文章

    Linux查看CPU和内存使用情况 stat命令查看jvm的GC情况 (以Linux为例) jvm优化必知系列——监控工具 Java JVM 参数设置大全

  8. 数据结构与算法—simhash

    引入 随着信息爆炸时代的来临,互联网上充斥着着大量的近重复信息,有效地识别它们是一个很有意义的课题. 例如,对于搜索引擎的爬虫系统来说,收录重复的网页是毫无意义的,只会造成存储和计算资源的浪费: 同时 ...

  9. Codeforces H. Prime Gift(折半枚举二分)

    题目描述: Prime Gift time limit per test 3.5 seconds memory limit per test 256 megabytes input standard ...

  10. Python3如何上传自己的PyPI项目

    有过一定的 Python 经验的开发者都知道,当引入第三方包时,我们常常会使用 pip install 命令来下载并导入包. 那么,如何写一个自己的包,上传到 PyPI 呢,其他开发者也可以通过 pi ...