android 侧滑菜单动画,react native 侧滑菜单：支持3种侧滑动画，支持iOS&android

项目介绍：

react-native-ezsidemenu

源码地址：https://github.com/easyui/react-native-ezsidemenu

简单易用的，支持侧滑和自定义的react native菜单组件。 支持iOS和android。

安装

$ npm install react-native-ezsidemenu --save

预览

default 类型

overlay 类型

slide 类型

使用

引入组件：

import EZSideMenu from 'react-native-ezsidemenu';

简单使用

//App.js

simpleMenu() {

return

menu={this.menu()}

ref="menu">

{this.contentView()}

}

高级使用

//App.js

advancedMenu() {

const menuWidth = DEVICE_SCREEN.width * 0.8;

const opacity = this.state.animation.interpolate({

inputRange: [0, menuWidth],

outputRange: [0, 1],

});

return

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()}

}

API

属性

key

type

default

description

menu

PropTypes.object.isRequired

菜单组件

shadowStyle

View.propTypes.style

{ backgroundColor: ‘rgba(0,0,0,.4)’ }

菜单旁的样式

menuStyle

View.propTypes.style

{}

菜单组件样式

direction

PropTypes.string

direction.Left

菜单方向

type

PropTypes.string

type.Default

菜单划动动画效果

position

PropTypes.object

new Animated.Value(0)

菜单滑出位置

width

PropTypes.number

DEVICE_SCREEN.width * 0.7

菜单宽度

animationFunction

PropTypes.func

animationFunction: (prop, value) => Animated.timing(prop, {

easing: Easing.inOut(Easing.ease),

duration: 300,

toValue: value

}),

菜单划动动画

panGestureEnabled

PropTypes.bool

true

菜单是否支持手势划动

panWidthFromEdge

PropTypes.number

60

菜单划开有效距离

panTolerance

PropTypes.object

{ x: 6, y: 20 }

菜单划动容错范围

onPanStartMove

PropTypes.func

菜单开始划动回调

onPanMove

PropTypes.func

菜单划动中回调

onPanEndMove

PropTypes.func

菜单结束划动回调

onSliding

PropTypes.func

菜单动画回调

onMenuStateChaned

PropTypes.func

菜单状态改变回调

方法

| function | description |

| — | — |

| open() | 打开菜单 |

| close() | 关闭菜单 |

License

MIT License. © Zhu Yangjun 2017