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

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

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

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

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

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

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

const Check = ()=>{ return ( <Surface width={18} height={12} > <Group scale={0.03}> <Shape 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`} /> </Group> </Surface> );}

下拉动画的实现上，需要使用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 ( <View style={styles.headerStyle}> <TouchableOpacity style={styles.action} > <Image style={styles.scanIcon}/> </TouchableOpacity> <TouchableOpacity style={styles.searchBar}> <Image source={require('../images/ic_search.png')} style={styles.iconStyle}/> <Text style={{fontSize: 13, color: "#666", marginLeft: 5}}>输入商家名、品类和商圈</Text> </TouchableOpacity> <TouchableOpacity style={styles.action} onPress={() => { this.setState({ showPop: !this.state.showPop }) }}> <Image style={styles.scanIcon} source={require('../images/icon_address.png')}/> </TouchableOpacity> </View> ) } render() { return ( <View> {this.renderHeader()} </View> ); }}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 ( <Surface width={T_WIDTH} height={T_HEIGHT}> <Shape d={path} stroke="#00000000" fill={fill} strokeWidth={0}/> </Surface> ) }}const TopMenuItem = (props) => { const onPress = () => { props.onSelect(props.index); } return ( <TouchableWithoutFeedback onPress={onPress}> <View style={styles.item}> <Text style={props.selected ? styles.menuTextHigh : styles.menuText}>{props.label}</Text> <Triangle selected={props.selected}/> </View> </TouchableWithoutFeedback> );};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 ( <TouchableHighlight onPress={onPress} underlayColor="#f5f5f5"> <View style={styles.tableItem}> <View style={styles.row}> {props.selected && <Check />} <Text style={textStyle}>{props.data.title}</Text> </View> <Text style={rightTextStyle}>{props.data.subtitle}</Text> </View> </TouchableHighlight> );};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 ( <TouchableHighlight onPress={onPress} underlayColor="#f5f5f5"> <View style={styles.titleItem}> {props.selected && <Check />} <Text style={textStyle}>{props.data.title}</Text> </View> </TouchableHighlight> );};const Check = () => { return ( <Surface width={18} height={12} > <Group scale={0.03}> <Shape 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`} /> </Group> </Surface> );}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 ( <Animated.View key={index} pointerEvents={enabled ? 'auto' : 'none'} style={[styles.content, {opacity: enabled ? 1 : 0, height: this.state.height[index]}]}> <ScrollView style={styles.scroll}> {d.data.map((data, subindex) => { return <Comp onSelectMenu={this.onSelectMenu} index={index} subindex={subindex} data={data} selected={subselected == subindex} key={subindex}/> })} </ScrollView> </Animated.View> ); } render() { let list = null; if (this.state.selectedIndex !== null) { list = this.props.config[this.state.selectedIndex].data; } console.log(list); return ( <View style={{flex: 1}}> <View style={styles.topMenu}> {this.state.top.map((t, index) => { return <TopMenuItem key={index} index={index} onSelect={this.onSelect} label={t} selected={this.state.selectedIndex === index}/> })} </View> {this.props.renderContent()} <View style={styles.bgContainer} pointerEvents={this.state.selectedIndex !== null ? "auto" : "none"}> <Animated.View style={[styles.bg, {opacity: this.state.fadeInOpacity}]}/> {this.props.config.map((d, index) => { return this.renderList(d, index); })} </View> </View> ); }}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 ( <TouchableOpacity > <Text style={styles.text}>index:{this.state.index} subindex:{this.state.subindex} title:{this.state.data.title}</Text> </TouchableOpacity> ); // alert(this.state.data.title) }; onSelectMenu=(index, subindex, data)=>{ this.setState({index, subindex, data}); }; render() { return ( <View style={styles.container}> <FoodActionBar/> <Separator/> <TopMenu style={styles.container} config={CONFIG} onSelectMenu={this.onSelectMenu} renderContent={this.renderContent}/> </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, width:width, backgroundColor: '#F5FCFF', }, text: { fontSize:20, marginTop:100, justifyContent: 'center', alignItems: 'center', },});

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