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

本文介绍了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',

  },

});

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