Skip to content

Latest commit

 

History

History
128 lines (100 loc) · 4.47 KB

README_CN.md

File metadata and controls

128 lines (100 loc) · 4.47 KB

react-native-ezsidemenu

NPM version release GitHub license

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

安装

$ npm install react-native-ezsidemenu --save

预览

default 类型

defaultIos defaultAndroid

overlay 类型

overlayIos overlayAndroid

slide 类型

slideIos slideAndroid

使用

引入组件:

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, {
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