本文介绍了React Native仿美团下拉菜单的实例代码，最近也在学习React Native，顺便分享给大家

在很多产品中都会涉及到下拉菜单选择功能，用的最好的当属美团了，其效果如下：

要实现上面的效果，在原生中比较好做，直接使用PopWindow组件即可。如果使用React Native开发上面的效果，需要注意几个问题：

1、 在下拉的时候有动画过度效果；

2、下拉菜单出现后点击菜单项，菜单项可选择，并触发对应的事件；

3、下拉菜单中的项目可以配置；

要实现弹框效果，我们马上回想到使用Model组件，而要绘制打钩图标和下拉三角，我们首先想到使用ART实现，当然选择使用图标也是可以的。例如使用ART绘制对勾的代码如下：

const Check = ()=>{

return (

width={18}

height={12}

>

fill={COLOR_HIGH}

d={`M494,52c-13-13-33-13-46,0L176,324L62,211c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10L494,99

C507,86,507,65,494,52z`}

/>

);

}

下拉动画的实现上，需要使用Animated。例如，背景颜色变化需要使用Animated.timing。

this.state.fadeInOpacity,

{

toValue: value,

duration : 250,

}

运行效果：

本示例设计三个文件：导航栏FoodActionBar.js，下拉弹框TopMenu.js和文件主类FoodView.js。

FoodActionBar.js

/**

* https://github.com/facebook/react-native

* @flow 首页的标题栏

*/

import React, {Component} from 'react';

import {Platform, View, Dimensions, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';

import px2dp from '../util/Utils'

const isIOS = Platform.OS == "ios"

const {width, height} = Dimensions.get('window')

const headH = px2dp(isIOS ? 64 : 44)

export default class FoodActionBar extends Component {

constructor(props) {

super(props);

this.state = {

showPop: false,

}

}

renderHeader() {

return (

输入商家名、品类和商圈

{ this.setState({ showPop: !this.state.showPop }) }}>

source={require('../images/icon_address.png')}/>

)

}

render() {

return (

{this.renderHeader()}

);

}

}

const styles = StyleSheet.create({

headerStyle: {

backgroundColor: "#ffffff",

height: headH,

paddingTop: px2dp(isIOS ? 20 : 0),

flexDirection: 'row',

alignItems: 'center',

},

searchBar: {

flex:1,

height: 30,

borderRadius: 19,

backgroundColor:'#e9e9e9',

marginLeft: 10,

flexDirection: 'row',

justifyContent: 'flex-start',

alignItems: 'center',

alignSelf: 'center',

paddingLeft: 10,

},

text: {

fontSize: 16,

color: '#ffffff',

justifyContent: 'center',

},

iconStyle: {

width: 22,

height: 22,

},

action: {

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

marginLeft:10,

marginRight:10

},

scanIcon: {

width: 28,

height: 28,

alignItems: 'center',

},

scanText: {

fontSize: 14,

color: '#ffffff',

justifyContent: 'center',

alignItems: 'center',

},

});

TopMenu.js

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React, {Component} from 'react';

import {

AppRegistry,

StyleSheet,

Animated,

ScrollView,

Dimensions,

PixelRatio,

Text,

TouchableWithoutFeedback,

TouchableHighlight,

ART,

View

} from 'react-native';

const {Surface, Shape, Path, Group} = ART;

const {width, height} = Dimensions.get('window');

const T_WIDTH = 7;

const T_HEIGHT = 4;

const COLOR_HIGH = '#00bea9';

const COLOR_NORMAL = '#6c6c6c';

const LINE = 1 / PixelRatio.get();

class Triangle extends React.Component {

render() {

var path;

var fill;

if (this.props.selected) {

fill = COLOR_HIGH;

path = new Path()

.moveTo(T_WIDTH / 2, 0)

.lineTo(0, T_HEIGHT)

.lineTo(T_WIDTH, T_HEIGHT)

.close();

} else {

fill = COLOR_NORMAL;

path = new Path()

.moveTo(0, 0)

.lineTo(T_WIDTH, 0)

.lineTo(T_WIDTH / 2, T_HEIGHT)

.close();

}

return (

)

}

}

const TopMenuItem = (props) => {

const onPress = () => {

props.onSelect(props.index);

}

return (

{props.label}

);

};

const Subtitle = (props) => {

let textStyle = props.selected ?

[styles.tableItemText, styles.highlight, styles.marginHigh] :

[styles.tableItemText, styles.margin];

let rightTextStyle = props.selected ? [styles.tableItemText, styles.highlight] : styles.tableItemText;

let onPress = () => {

props.onSelectMenu(props.index, props.subindex, props.data);

}

return (

{props.selected && }

{props.data.title}

{props.data.subtitle}

);

};

const Title = (props) => {

let textStyle = props.selected ?

[styles.tableItemText, styles.highlight, styles.marginHigh] :

[styles.tableItemText, styles.margin];

let rightTextStyle = props.selected ? [styles.tableItemText, styles.highlight] : styles.tableItemText;

let onPress = () => {

props.onSelectMenu(props.index, props.subindex, props.data);

}

return (

{props.selected && }

{props.data.title}

);

};

const Check = () => {

return (

width={18}

height={12}

>

fill={COLOR_HIGH}

d={`M494,52c-13-13-33-13-46,0L176,324L62,211c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10L494,99

C507,86,507,65,494,52z`}

/>

);

}

export default class TopMenu extends Component {

constructor(props) {

super(props);

let array = props.config;

let top = [];

let maxHeight = [];

let subselected = [];

let height = [];

//最大高度

var max = parseInt((height - 80) * 0.8 / 43);

for (let i = 0, c = array.length; i < c; ++i) {

let item = array[i];

top[i] = item.data[item.selectedIndex].title;

maxHeight[i] = Math.min(item.data.length, max) * 43;

subselected[i] = item.selectedIndex;

height[i] = new Animated.Value(0);

}

//分析数据

this.state = {

top: top,

maxHeight: maxHeight,

subselected: subselected,

height: height,

fadeInOpacity: new Animated.Value(0),

selectedIndex: null

};

}

componentDidMount() {

}

createAnimation = (index, height) => {

return Animated.timing(

this.state.height[index],

{

toValue: height,

duration: 250

}

);

}

createFade = (value) => {

return Animated.timing(

this.state.fadeInOpacity,

{

toValue: value,

duration: 250,

}

);

}

onSelect = (index) => {

if (index === this.state.selectedIndex) {

//消失

this.hide(index);

} else {

this.setState({selectedIndex: index, current: index});

this.onShow(index);

}

}

hide = (index, subselected) => {

let opts = {selectedIndex: null, current: index};

if (subselected !== undefined) {

this.state.subselected[index] = subselected;

this.state.top[index] = this.props.config[index].data[subselected].title;

opts = {selectedIndex: null, current: index, subselected: this.state.subselected.concat()};

}

this.setState(opts);

this.onHide(index);

}

onShow = (index) => {

Animated.parallel([this.createAnimation(index, this.state.maxHeight[index]), this.createFade(1)]).start();

}

onHide = (index) => {

//其他的设置为0

for (let i = 0, c = this.state.height.length; i < c; ++i) {

if (index != i) {

this.state.height[i].setValue(0);

}

}

Animated.parallel([this.createAnimation(index, 0), this.createFade(0)]).start();

}

onSelectMenu = (index, subindex, data) => {

this.hide(index, subindex);

this.props.onSelectMenu && this.props.onSelectMenu(index, subindex, data);

}

renderList = (d, index) => {

let subselected = this.state.subselected[index];

let Comp = null;

if (d.type == 'title') {

Comp = Title;

} else {

Comp = Subtitle;

}

let enabled = this.state.selectedIndex == index || this.state.current == index;

return (

style={[styles.content, {opacity: enabled ? 1 : 0, height: this.state.height[index]}]}>

{d.data.map((data, subindex) => {

return

onSelectMenu={this.onSelectMenu}

index={index}

subindex={subindex}

data={data}

selected={subselected == subindex}

key={subindex}/>

})}

);

}

render() {

let list = null;

if (this.state.selectedIndex !== null) {

list = this.props.config[this.state.selectedIndex].data;

}

console.log(list);

return (

{this.state.top.map((t, index) => {

return

key={index}

index={index}

onSelect={this.onSelect}

label={t}

selected={this.state.selectedIndex === index}/>

})}

{this.props.renderContent()}

{this.props.config.map((d, index) => {

return this.renderList(d, index);

})}

);

}

}

const styles = StyleSheet.create({

scroll: {flex: 1, backgroundColor: '#fff'},

bgContainer: {position: 'absolute', top: 40, width: width, height: height},

bg: {flex: 1, backgroundColor: 'rgba(50,50,50,0.2)'},

content: {

position: 'absolute',

width: width

},

highlight: {

color: COLOR_HIGH

},

marginHigh: {marginLeft: 10},

margin: {marginLeft: 28},

titleItem: {

height: 43,

alignItems: 'center',

paddingLeft: 10,

paddingRight: 10,

borderBottomWidth: LINE,

borderBottomColor: '#eee',

flexDirection: 'row',

},

tableItem: {

height: 43,

alignItems: 'center',

paddingLeft: 10,

paddingRight: 10,

borderBottomWidth: LINE,

borderBottomColor: '#eee',

flexDirection: 'row',

justifyContent: 'space-between'

},

tableItemText: {fontWeight: '300', fontSize: 14},

row: {

flexDirection: 'row'

},

item: {

flex: 1,

flexDirection: 'row',

alignItems: 'center',

justifyContent: 'center',

},

menuTextHigh: {

marginRight: 3,

fontSize: 13,

color: COLOR_HIGH

},

menuText: {

marginRight: 3,

fontSize: 13,

color: COLOR_NORMAL

},

topMenu: {

flexDirection: 'row',

height: 40,

borderTopWidth: LINE,

borderTopColor: '#bdbdbd',

borderBottomWidth: 1,

borderBottomColor: '#f2f2f2'

},

});

主类FoodView.js：

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React, {Component} from 'react';

import {

AppRegistry,

StyleSheet,

TouchableOpacity,

Dimensions,

Text,

View

} from 'react-native';

const {width, height} = Dimensions.get('window');

import FoodActionBar from "./pop/FoodActionBar";

import Separator from "./util/Separator";

import TopMenu from "./pop/TopMenu";

const CONFIG = [

{

type:'subtitle',

selectedIndex:1,

data:[

{title:'全部', subtitle:'1200m'},

{title:'自助餐', subtitle:'300m'},

{title:'自助餐', subtitle:'200m'},

{title:'自助餐', subtitle:'500m'},

{title:'自助餐', subtitle:'800m'},

{title:'自助餐', subtitle:'700m'},

{title:'自助餐', subtitle:'900m'},

]

},

{

type:'title',

selectedIndex:0,

data:[{

title:'智能排序'

}, {

title:'离我最近'

}, {

title:'好评优先'

}, {

title:'人气最高'

}]

}

];

export default class FoodView extends Component {

constructor(props){

super(props);

this.state = {

data:{}

};

}

renderContent=()=>{

return (

index:{this.state.index} subindex:{this.state.subindex} title:{this.state.data.title}

);

// alert(this.state.data.title)

};

onSelectMenu=(index, subindex, data)=>{

this.setState({index, subindex, data});

};

render() {

return (

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

width:width,

backgroundColor: '#F5FCFF',

},

text: {

fontSize:20,

marginTop:100,

justifyContent: 'center',

alignItems: 'center',

},

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

仿美团下拉菜单 html,React Native仿美团下拉菜单的实例代码相关推荐

  1. 这是可用于下一个项目的React Native工具列表

    by Rajput Mehul 通过拉杰普特·梅胡尔(Rajput Mehul) 这是可用于下一个项目的React Native工具列表 (Here's a list of React Native ...

  2. 如何使用React Native构建嵌套的抽屉菜单

    by Dhruvdutt Jadhav 由Dhruvdutt Jadhav 如何使用React Native构建嵌套的抽屉菜单 (How to build a nested drawer menu w ...

  3. android 申请拍照权限,React Native模块之Permissions权限申请的实例相机

    React Native模块之Permissions权限申请的实例相机 发布时间:2020-09-03 23:49:26 来源:脚本之家 阅读:280 作者:lqh React Native模块之Pe ...

  4. React Native仿美团下拉菜单

    本篇博客转自:http://blog.csdn.net/xiangzhihong8/article/details/76862097 在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效 ...

  5. React Native在美团外卖客户端的实践

    MRN简介 MRN(Meituan React Native) 是基于开源的React Native框架改造并完善而成的一套动态化方案,在开发体验上基本能与原生RN保持一致,同时从业务需求的角度满足从 ...

  6. React Native 仿 ofo 共享单车 App

    本文为 Marno 原创,转载必须保留出处! 公众号[ aMarno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn http:/ ...

  7. React Native 仿开眼 App

    本文为 Marno 原创,转载必须保留出处! 公众号[ aMarno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 一.前言 前 ...

  8. React Native在美团外卖客户端的实践，已有千人收藏

    最下层是Android/iOS系统服务层,因为MRN是跨端的,所以需要引入这一层.相对单一平台来说,由于MRN的引入,整个App的架构不可避免地需要考虑Android和iOS平台本身的差异性. 倒数第 ...

  9. native react 变颜色 点击_在React Native中按下更改按钮样式(Change button style on press in React Native)...

    问 题 我希望我的应用中按钮的样式在按下时更改.最好的方法是什么? 解决方案 使用 touchablehighlight . 这里有一个例子: 'use strict'; import react,{ ...

最新文章

  1. UITableView的cell向左滑出有删除，修改等选项
  2. LINQ的Union方法
  3. 三星note4安装linux,Leanote Ubuntu 源码安装
  4. 企业网站前端制作实战教程 JQuery CSS JS HTML 登录界面
  5. mysql ddl 锁_MySQL Online DDL导致全局锁表案例分析
  6. DataGrid的多行提交
  7. 第五章 Spring3.0 、Hibernate3.3与Struts2的整合 基于Annotation
  8. C# 类(11) 密封类.
  9. vim编辑器常用命令整理
  10. 华为交换机：基于IP子网划分VLAN
  11. PayPal第一次提现失败手续费返还教程
  12. Jsp中9大内建对象
  13. python爬b站视频_python代码福利：用requests爬取B站视频封面
  14. Oracle 12c 新特性之 数据库内归档(In-Database Archiving)
  15. 【有利可图网】PS实战教程43：PS合成沙尘暴侵蚀打散场景的灰姑娘图片
  16. 论UT、FT等测试对代码重构的重要性
  17. 亿发定制ERP企业管理系统，适用中小型企业的经济实惠的解决方案
  18. Spring Cloud 极简入门
  19. 我的世界服务器方块高度修改,我的世界：Mojang解除建筑高度限制，最高可达2032格，玩家狂喜！...
  20. 【vue】vue实现用户长时间不操作，提示用户登录已过期重新登录

热门文章

  1. GHOST WIN8 32位软件自选安装专业优化版 201307 V4.0
  2. 开源备份工具duplicity支持阿里云OSS后端存储
  3. 28个Unix/Linux的命令行神器
  4. abb机器人常见维故障现象
  5. 微信发布的辟谣小程序
  6. 电子计算机发展经历几个阶段,计算机的发展经历几个阶段?每个阶段的电子原件及特征主要概述...
  7. echarts大数据多图表绘制卡顿解决方案
  8. Linux终端共享分屏神器tmux
  9. Drag and drop拖放框架
  10. Xubuntu22.04装有道词典：报错has unexpected type “float“(一百四十一)