Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-ezsidemenu with all npm packages installed. Try it out:

var reactNativeEzsidemenu = require("react-native-ezsidemenu")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-ezsidemenu v1.2.0

customizable side menu for React Native on iOS&android.

react-native-ezsidemenu

中文文档

NPM version release GitHub license

customizable side menu for React Native on iOS&android.

Installation

$ npm install react-native-ezsidemenu --save

Preview

default type

defaultIos defaultAndroid

overlay type

overlayIos overlayAndroid

slide type

slideIos slideAndroid

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

keytypedefaultdescription
menuPropTypes.object.isRequiredmenu component
shadowStyleView.propTypes.style{ backgroundColor: 'rgba(0,0,0,.4)' }the style of the menu sahdow
menuStyleView.propTypes.style{}the style of the menu
directionPropTypes.stringdirection.Leftthe direction of the menu
typePropTypes.stringtype.Defaultthe animation of the menu
positionPropTypes.objectnew Animated.Value(0)the distance of the menu
widthPropTypes.numberDEVICE_SCREEN.width * 0.7the width of the menu
animationFunctionPropTypes.funcanimationFunction: (prop, value) => Animated.timing(prop, {
easing: Easing.inOut(Easing.ease),
duration: 300,
toValue: value
}),
the animation of the menu
panGestureEnabledPropTypes.booltruethe menu can be move with gestures or not
panWidthFromEdgePropTypes.number60edge distance on content view to open side menu
panTolerancePropTypes.object{ x: 6, y: 20 }pan move tolerance
onPanStartMovePropTypes.funccallback on menu start move
onPanMovePropTypes.funccallback on menu move
onPanEndMovePropTypes.funccallback on menu end move
onSlidingPropTypes.funccallback on menu is sliding
onMenuStateChanedPropTypes.funccallback on menu state is chaned

Function

functiondescription
open()open menu
close()close menu

License

MIT License. © Zhu Yangjun 2017

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free