react-native-ezsidemenu

中文文档

customizable side menu for React Native on iOS&android.

Installation

$ npm install react-native-ezsidemenu --save

Preview

default type

overlay type

slide type

Usage

import library：

import EZSideMenu from 'react-native-ezsidemenu';

simple

//App.js
simpleMenu() {
    return <EZSideMenu
      menu={this.menu()}
      ref="menu">
      {this.contentView()}
    </EZSideMenu>
  }

advanced

//App.js
  advancedMenu() {
    const menuWidth = DEVICE_SCREEN.width * 0.8;
    const opacity = this.state.animation.interpolate({
      inputRange: [0, menuWidth],
      outputRange: [0, 1],
    });
    return <EZSideMenu
      onMenuStateChaned={(isOpen) => { this.setState({ isOpen }) }}
      onPanMove={(x) => { console.log('onPanMove ' + x) }}
      onSliding={(x, persent) => { console.log('onSliding x ' + x + ' persent ' + persent) }}
      type={EZSideMenu.type.Default}
      menuStyle={styles.container}
      shadowStyle={{ backgroundColor: 'rgba(20,20,20,.7)' }}
      direction={EZSideMenu.direction.Right}
      ref="menu"
      position={this.state.animation}
      width={menuWidth}
      menu={this.menu(opacity)}
      animationFunction={(prop, value) => Animated.spring(prop, {
        friction: 10,
        toValue: value
      })}>
      {this.contentView()}
    </EZSideMenu>
  }

API

Props

| key | type | default | description |
| --- | --- | --- | --- | | menu | PropTypes.object.isRequired | | menu component | | shadowStyle | View.propTypes.style | { backgroundColor: 'rgba(0,0,0,.4)' } | the style of the menu sahdow| | menuStyle | View.propTypes.style | {} | the style of the menu | | direction | PropTypes.string | direction.Left | the direction of the menu | | type | PropTypes.string | type.Default | the animation of the menu | | position | PropTypes.object | new Animated.Value(0) | the distance of the menu | | width | PropTypes.number | DEVICE_SCREEN.width * 0.7 | the width of the menu | | animationFunction | PropTypes.func | animationFunction: (prop, value) => Animated.timing(prop, { easing: Easing.inOut(Easing.ease), duration: 300, toValue: value }), | the animation of the menu | | panGestureEnabled | PropTypes.bool | true | the menu can be move with gestures or not | | panWidthFromEdge | PropTypes.number | 60 | edge distance on content view to open side menu | | panTolerance | PropTypes.object | { x: 6, y: 20 } | pan move tolerance | | onPanStartMove | PropTypes.func | | callback on menu start move | | onPanMove | PropTypes.func | | callback on menu move | | onPanEndMove | PropTypes.func | | callback on menu end move | | onSliding | PropTypes.func | | callback on menu is sliding | | onMenuStateChaned | PropTypes.func | | callback on menu state is chaned |

Function

| function | description |
| --- | --- | | open() | open menu | | close() | close menu |

License

MIT License. © Zhu Yangjun 2017