React-native分享类似美团下拉菜单Demo

上图:

image.png

这个Demo我已经做了一些处理,所以,有需要的朋友可以自己更改
下面放出源码

/**
 * 
 * 皓天
 * @memberOf ActionBar
 */
import React, { Component } from "react";
import {
  View,
  Text,
  TouchableHighlight,
  Image,
  TouchableOpacity,
  ScrollView,
  Animated,
  Easing,
  StyleSheet
} from "react-native";
import PropTypes from "prop-types";

class ActionBar extends Component {
  constructor(props, context) {
    super(props, context);

    var selectIndex = new Array(this.props.data.length);
    for (var i = 0; i < selectIndex.length; i++) {
      selectIndex[i] = 0;
    }
    this.state = {
      activityIndex: -1,
      selectIndex: selectIndex,
      rotationAnims: props.data.map(() => new Animated.Value(0))
    };

    this.defaultConfig = {
      bgColor: "grey",
      tintColor: "#333333",
      activityTintColor: "red",
      arrowImg: require("./img/dropdown_arrow.png"),
      checkImage: require("./img/menu_check.png")
    };
  }

  renderChcek(index, title) {
    var activityIndex = this.state.activityIndex;
    if (this.state.selectIndex[activityIndex] == index) {
      var checkImage = this.props.checkImage
        ? this.props.checkImage
        : this.defaultConfig.checkImage;
      return (
        
          
            {title}
          
          
        
      );
    } else {
      return (
        
          
            {title}
          
        
      );
    }
  }

  renderActivityPanel() {
    if (this.state.activityIndex >= 0) {
      var currentTitles = this.props.data[this.state.activityIndex];

      var heightStyle = {};
      if (
        this.props.maxHeight &&
        this.props.maxHeight < currentTitles.length * 44
      ) {
        heightStyle.height = this.props.maxHeight;
      }

      return (
        
           this.openOrClosePanel(this.state.activityIndex)}
            activeOpacity={1}
            style={{
              position: "absolute",
              left: 0,
              right: 0,
              top: 0,
              bottom: 0
            }}
          >
            
          

          
            {currentTitles.map((title, index) => (
              
                {this.renderChcek(index, title)}
                
              
            ))}
          
        
      );
    } else {
      return null;
    }
  }

  openOrClosePanel(index) {
    this.props.bannerAction ? this.props.bannerAction() : null;

    if (this.state.activityIndex == index) {
      this.closePanel(index);
      this.setState({
        activityIndex: -1
      });
    } else {
      if (this.state.activityIndex > -1) {
        this.closePanel(this.state.activityIndex);
      }
      this.openPanel(index);
      this.setState({
        activityIndex: index
      });
    }
  }

  openPanel(index) {
    Animated.timing(this.state.rotationAnims[index], {
      toValue: 0.5,
      duration: 300,
      easing: Easing.linear
    }).start();
  }

  closePanel(index) {
    Animated.timing(this.state.rotationAnims[index], {
      toValue: 0,
      duration: 300,
      easing: Easing.linear
    }).start();
  }

  split(data){
    return data.length > 6 ? data.substring(0,6) + '...' : data
  }

  itemOnPress(index) {
    if (this.state.activityIndex > -1) {
      var selectIndex = this.state.selectIndex;
      selectIndex[this.state.activityIndex] = index;
      this.setState({
        selectIndex: selectIndex
      });
      if (this.props.handler) {
        this.props.handler(this.state.activityIndex, index);
      }
    }
    this.openOrClosePanel(this.state.activityIndex);
  }

  renderDropDownArrow(index) {
    var icon = this.props.arrowImg
      ? this.props.arrowImg
      : this.defaultConfig.arrowImg;
    return (
      
    );
  }

  render() {
    
    return (
      
        
          {this.props.data.map((rows, index) => (
            
              
                
                  {/* {rows[this.state.selectIndex[index]]} */}
                  {this.split(rows[this.state.selectIndex[index]])}
                
                {this.renderDropDownArrow(index)}
              
            
          ))}
        
        {this.props.children}

        {this.renderActivityPanel()}
      
    );
  }
}

ActionBar.propTypes = {
  bgColor: PropTypes.string,
  tintColor: PropTypes.string,
  activityTintColor: PropTypes.string,
  arrowImg: PropTypes.number,
  checkImage: PropTypes.number,
  data: PropTypes.array,
  bannerAction: PropTypes.func,
  optionTextStyle: PropTypes.object,
  titleStyle: PropTypes.object,
  maxHeight: PropTypes.number
};

const styles = StyleSheet.create({
  title_style: {
    fontSize: 16
  },
  item_text_style: {
    color: "#333333",
    fontSize: 16
  }
});

export default ActionBar;

下面是使用方法

  render() {
    var data = [["第一项目项目项目", "第二项目","1111111111"], ["第三项目", "第四项目","22222222222222"]];
    return (
      
        
            // this.setState({ text: data[selection][row] })
            (HomeStore.firstName = data[selection][row])
          }
          data={data}
          // data={HomeStore.dataTest}
        >
          
            {HomeStore.firstName} -------这里是选择的内容
          
        
      
    );
  }