React Native 미 단 드 롭 다운 메뉴 의 인 스 턴 스 코드

본 고 는 React Native 모방 미 단 드 롭 다운 메뉴 의 인 스 턴 스 코드 를 소개 하 였 으 며,최근 에 도 React Native 를 배우 고 있 으 며,아울러 여러분 께 공유 하고 있 습 니 다.
많은 제품 에서 드 롭 다운 메뉴 선택 기능 과 관련 되 는데 가장 좋 은 것 은 바로 미 단 입 니 다.그 효 과 는 다음 과 같 습 니 다.

위의 효 과 를 실현 하려 면 원생 중 에 하 는 것 이 좋 으 며,PopWindow 구성 요 소 를 직접 사용 하면 된다.React Native 를 사용 하여 위의 효 과 를 개발 하려 면 몇 가지 문 제 를 주의해 야 합 니 다.
1.아래로 끌 어 내 릴 때 애니메이션 의 과도 한 효과 가 있 습 니 다.
2.드 롭 다운 메뉴 가 나타 난 후 메뉴 항목 을 클릭 하면 메뉴 항목 을 선택 할 수 있 고 해당 하 는 이벤트 가 발생 합 니 다.
3.드 롭 다운 메뉴 의 항목 을 설정 할 수 있 습 니 다.
탄 상자 효 과 를 실현 하려 면 바로 사용모델 구성 요소을 회상 하고 갈고리 아이콘 과 드 롭 다운 삼각형 을 그 려 야 합 니 다.우 리 는 먼저 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, 
 }

실행 효과:

이 예제 에 서 는 세 개의 파일 을 설계 합 니 다.네 비게 이 션 표시 줄 FoodAction Bar.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',

  },

});

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.