登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

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

[复制链接]
来自: easyui 分类: iOS精品源码 上传时间: 2018-1-4 13:51:44
Tag:

项目介绍:

react-native-ezsidemenu

源码地址:https://github.com/easyui/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

属性

keytypedefaultdescription
menuPropTypes.object.isRequired 菜单组件
shadowStyleView.propTypes.style{ backgroundColor: 'rgba(0,0,0,.4)' }菜单旁的样式
menuStyleView.propTypes.style{}菜单组件样式
directionPropTypes.stringdirection.Left菜单方向
typePropTypes.stringtype.Default菜单划动动画效果
positionPropTypes.objectnew Animated.Value(0)菜单滑出位置
widthPropTypes.numberDEVICE_SCREEN.width * 0.7菜单宽度
animationFunctionPropTypes.funcanimationFunction: (prop, value) => Animated.timing(prop, {
easing: Easing.inOut(Easing.ease),
duration: 300,
toValue: value
}),
菜单划动动画
panGestureEnabledPropTypes.booltrue菜单是否支持手势划动
panWidthFromEdgePropTypes.number60菜单划开有效距离
panTolerancePropTypes.object{ x: 6, y: 20 }菜单划动容错范围
onPanStartMovePropTypes.func 菜单开始划动回调
onPanMovePropTypes.func 菜单划动中回调
onPanEndMovePropTypes.func 菜单结束划动回调
onSlidingPropTypes.func 菜单动画回调
onMenuStateChanedPropTypes.func 菜单状态改变回调

方法

| function | description |
| --- | --- |
| open() | 打开菜单 |
| close() | 关闭菜单 |

License

MIT License. © Zhu Yangjun 2017

相关源码推荐:

我来说两句
*滑动验证:
所有评论(16)
逆鳞九霄 2018-1-5 10:30:33
精华内容,楼主V5!
回复
BlueManlove 2018-1-5 10:30:46
不错不错,楼主辛苦了。。。
回复
AlonMessi 2018-1-5 10:33:47
code4app好的代码demo真的很多,谢谢啦~
回复
kengsir 2018-1-5 10:34:38
好好 学习了 确实不错
回复
littleRed 2018-1-5 10:35:27
code4app确实是个好地方,必须支持~
回复
phoiu 2018-1-5 10:38:26
mark,收藏了
回复
hellokenken 2018-1-5 10:39:04
虽不明,但觉厉...
回复
长弓雪舞 2018-1-5 14:18:50
淡定,淡定,淡定……
回复
code4app热心网友 2018-1-7 05:45:55
正需要啊,感谢楼主无私分享!
回复
12下一页
提取码:  下载次数:22 状态:已购或VIP 售价:0(原价:15)金钱 下载权限:初级码农 
1399 0 22
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表