React Native仿美团下拉菜单的实例代码

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

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

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

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

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

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

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

const Check = ()=>{
 return (
   
    
      
    
   
 );
}

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

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

运行效果：

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

FoodActionBar.js



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 }) }}>
   
 
      
    )
  }

  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



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 (
    
      
 
      
    
  );
}



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 (
      
 
   {d.data.map((data, subindex) => {
     return 
   })}
 
      
    );
  }

  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 
   })}
 
 {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：



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',

  },

});

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

React Native仿美团下拉菜单的实例代码

JavaScript相关栏目本月热门文章