React Native仿美团下拉菜单

本篇博客转自：/xiangzhihong8/article/details/76862097

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

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

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

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

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

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

const Check = ()=>{return (<Surface width={18}height={12}><Group scale={0.03}><Shapefill={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,99C507,86,507,65,494,52z`}/></Group></Surface>);}12345678910111213141516

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

this.state.fadeInOpacity,{toValue: value, duration : 250, }12345

运行效果：

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

FoodActionBar.js

/*** /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',},});12345678910111213141516171819222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899

TopMenu.js

/*** Sample React Native App* /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 ponent {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 (<Surfacewidth={18}height={12}><Group scale={0.03}><Shapefill={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,99C507,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) => {//其他的设置为0for (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 <ComponSelectMenu={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 <TopMenuItemkey={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'},});12345678910111213141516171819222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119111221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992000220320420520620720820921021121221321421521621721821921222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377

主类FoodView.js：

/*** Sample React Native App* /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',},});