react native 侧滑菜单

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

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

安装

$ npm install react-native-ezsidemenu --save

预览

default 类型

defaultIos

[图片上传失败...(image-9bd48d-1516774287267)]

overlay 类型

[图片上传失败...(image-5016fd-1516774287267)] [图片上传失败...(image-53a7e3-1516774287267)]

slide 类型

slideIos

[图片上传失败...(image-957a6a-1516774287267)]

使用

引入组件：

import EZSideMenu from 'react-native-ezsidemenu';

简单使用

//App.js
simpleMenu() {
    return <EZSideMenu
      menu={this.menu()}
      ref="menu">
      {this.contentView()}
    </EZSideMenu>
  }

高级使用

//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

属性

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, { <br /> easing: Easing.inOut(Easing.ease), <br /> duration: 300, <br /> toValue: value <br /> }),	菜单划动动画
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()	关闭菜单