本篇文章主要介绍了react native悬浮按钮组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标。
效果图
安装方法
npm i react-native-action-button --savereact-native link react-native-vector-icons
登录后复制
因为用到了react-native-vector-icons图标组件,需要做下link。如果你项目中已经使用了react-native-vector-icons,那就不需要这步了。
示例代码
悬浮按钮组件示例 console.log("notes tapped!")}> {}}> {}}> { alert('你点了我!')}} renderIcon={() => ( 新增 )} />
登录后复制
主要参数说明
ActionButton
size:按钮的大小,默认为56
active:是否显示按钮
position:按钮的位置,可以为left center right
offsetX:X轴上的偏移位置
offsetY:Y轴上的偏移位置
onPress:点击事件
onLongPress:长按事件
buttonText:按钮标题
verticalOrientation:弹出按钮的方向,up 或者 down
renderIcon:可以自定义按钮显示的样式,默认是一个加号
ActionButton.Item
size:按钮的大小,默认为56
title:按钮标题
buttonColor:按钮颜色
onPress:点击事件
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Ajax获取到数据放入echarts里不显示的原因分析及解决办法
使用对象封装ajax重复调用的方法
基于iframe实现ajax跨域请求 获取网页中ajax数据
以上就是React Native悬浮按钮组件的示例代码的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2756167.html