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 (
        <View
          style={{
            flex: 1,
            justifyContent: "space-between",
            alignItems: "center",
            paddingHorizontal: 15,
            flexDirection: "row"
          }}
        >
          <Text
            style={[
              styles.item_text_style,
              this.props.optionTextStyle,
              {
                color: this.props.activityTintColor
                  ? this.props.activityTintColor
                  : this.defaultConfig.activityTintColor
              }
            ]}
          >
            {title}
          </Text>
          <Image
            source={checkImage}
            style={{
              tintColor: this.props.activityTintColor
                ? this.props.activityTintColor
                : this.defaultConfig.activityTintColor
            }}
          />
        </View>
      );
    } else {
      return (
        <View
          style={{
            flex: 1,
            justifyContent: "space-between",
            alignItems: "center",
            paddingHorizontal: 15,
            flexDirection: "row"
          }}
        >
          <Text
            style={[
              styles.item_text_style,
              this.props.optionTextStyle,
              {
                color: this.props.tintColor
                  ? this.props.tintColor
                  : this.defaultConfig.tintColor
              }
            ]}
          >
            {title}
          </Text>
        </View>
      );
    }
  }

  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 (
        <View
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            top: 40,
            bottom: 0
          }}
        >
          <TouchableOpacity
            onPress={() => this.openOrClosePanel(this.state.activityIndex)}
            activeOpacity={1}
            style={{
              position: "absolute",
              left: 0,
              right: 0,
              top: 0,
              bottom: 0
            }}
          >
            <View style={{ opacity: 0.4, backgroundColor: "black", flex: 1 }} />
          </TouchableOpacity>

          <ScrollView
            style={[
              {
                position: "absolute",
                top: 0,
                left: 0,
                right: 0,
                backgroundColor: "white"
              },
              heightStyle
            ]}
          >
            {currentTitles.map((title, index) => (
              <TouchableOpacity
                key={index}
                activeOpacity={1}
                style={{ flex: 1, height: 44 }}
                onPress={this.itemOnPress.bind(this, index)}
              >
                {this.renderChcek(index, title)}
                <View
                  style={{
                    backgroundColor: "#F6F6F6",
                    height: 1,
                    marginLeft: 15
                  }}
                />
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
      );
    } 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 (
      <Animated.Image
        source={icon}
        style={{
          width: 6,
          height: 4,
          marginLeft: 8,
          tintColor:
            index === this.state.activityIndex
              ? this.props.activityTintColor
                ? this.props.activityTintColor
                : this.defaultConfig.activityTintColor
              : this.props.tintColor
                ? this.props.tintColor
                : this.defaultConfig.tintColor,
          transform: [
            {
              rotateZ: this.state.rotationAnims[index].interpolate({
                inputRange: [0, 1],
                outputRange: ["0deg", "360deg"]
              })
            }
          ]
        }}
      />
    );
  }

  render() {
    
    return (
      <View style={{ flexDirection: "column", flex: 1 }}>
        <View
          style={{
            flexDirection: "row",
            backgroundColor: this.props.bgColor
              ? this.props.bgColor
              : this.defaultConfig.bgColor
          }}
        >
          {this.props.data.map((rows, index) => (
            <TouchableOpacity
              activeOpacity={1}
              onPress={this.openOrClosePanel.bind(this, index)}
              key={index}
              style={{
                flex: 1,
                height: 48,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <Text
                  style={[
                    styles.title_style,
                    this.props.titleStyle,
                    {
                      color:
                        index === this.state.activityIndex
                          ? this.props.activityTintColor
                            ? this.props.activityTintColor
                            : this.defaultConfig.activityTintColor
                          : this.props.tintColor
                            ? this.props.tintColor
                            : this.defaultConfig.tintColor
                    }
                  ]}
                >
                  {/* {rows[this.state.selectIndex[index]]} */}
                  {this.split(rows[this.state.selectIndex[index]])}
                </Text>
                {this.renderDropDownArrow(index)}
              </View>
            </TouchableOpacity>
          ))}
        </View>
        {this.props.children}

        {this.renderActivityPanel()}
      </View>
    );
  }
}

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 (
      <View style={styles.container}>
        <ActionBar
          style={{ flex: 1 }}
          bgColor={"white"}
          tintColor={"#000000"}
          activityTintColor={"#3BB4F2"}
          // arrowImg={}
          // checkImage={}
          optionTextStyle={{ color: "#333333" }}
          titleStyle={{color: '#3BB4F2'}}
          // maxHeight={300}
          handler={(selection, row) =>
            // this.setState({ text: data[selection][row] })
            (HomeStore.firstName = data[selection][row])
          }
          data={data}
          // data={HomeStore.dataTest}
        >
          <View style={{ flex: 1 }}>
            <Text>{HomeStore.firstName} -------这里是选择的内容</Text>
          </View>
        </ActionBar>
      </View>
    );
  }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,772评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,458评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,610评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,640评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,657评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,590评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,962评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,631评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,870评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,386评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,969评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2赞 342