1.2.0 • Published 6 years ago
react-native-ezsidemenu v1.2.0
react-native-ezsidemenu
customizable side menu for React Native on iOS&android.
Installation
$ npm install react-native-ezsidemenu --savePreview
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