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