Skip to content

easyui/react-native-ezsidemenu

Repository files navigation

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

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